Synthesis: React Native Design System App

Challenges

- Understanding useState Across Screens -

Navigating multiple screens revealed the ephemeral nature of local useState. After deleting a design system, screens did not automatically refresh their local state, resulting in outdated UI data. I learned that screens maintain only their initial state unless explicitly refreshed or re-fetched from context or backend.

- Optimistic State Updates vs. Refetching -

Implementing “optimistic updates” allowed the UI to immediately reflect deletions without waiting for backend confirmation. This improved responsiveness but highlighted the challenge of maintaining a single source of truth across screens and context.

- React Context Integration -

Using React Context for centralized state management was initially confusing because it replaced traditional prop passing. While powerful for shared state, it required explicit syncing with local screen states to avoid stale data.

- State Syncing & Data Shape Complexity -

Managing multiple layers of state (context vs local) and nested data structures introduced subtle bugs. Many of my design system data were array structures that I built myself and were present on the REST API endpoints so they could be fetched and accessed. However, I did not add enough unique IDs or make the structures scalable enough, which caused problems when displaying them as the app grew. Elements with varying properties sometimes caused undefined errors during rendering. Handling asynchronous fetches required careful management of loading states and conditional checks.

- Firestore Data Structure & Async Challenges -

Firestore’s behavior with nested arrays and object keys created additional complexity. Keys are automatically sorted, and deep equality queries are unsupported, forcing me to write conversion and flattening logic to preserve the intended JSON structure. Async fetching led to initial undefined states, requiring safeguards before running array operations like .filter().

- Toggle Selection Logic -

Developing the toggle selection function for design system elements was particularly difficult, as it required managing nested states and ensuring consistent updates across context and local state.

- Scalability & Componentization -

Rendering complex design system elements demanded more reusable components. Implementing a renderItem function with type-based switching simplified the UI and made the app more scalable for future expansions.

- ADB Issues on MacOS -

After updating MacOS and Android Studio, ADB stopped recognizing emulators. Despite extensive troubleshooting, I switched to testing on physical devices. This highlighted platform-specific development challenges when using React Native and Expo on Apple Silicon machines.