{"@context":"https://ihatereading.in/roadmap/schema/v1","type":"roadmap-chapter","roadmap":{"slug":"vibe-coding-mobile-app-development","title":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents)","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development.json"},"slug":"state-management","title":"State Management","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/state-management","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/state-management.json","summary":{"breadcrumb":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents) → State Management","purpose":"Choose between local state, context, Zustand and TanStack Query, separate client state from server state, and prompt agents to keep state predictable.","prerequisites":["Pages, Routing & Navigation"],"afterThisChapter":["Mobile Storage & Memory"]},"agentLens":null,"topics":[{"id":"local-component-state","slug":"local-component-state","title":"Local component state","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["Use `useState` or `useReducer` for UI details only one component cares about, such as an open dropdown or a text input."],"why":["Clear ownership prevents stale screens and the 'it works after I restart the app' class of bugs."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Use `useState` or `useReducer` for UI details only one component cares about, such as an open dropdown or a text input.","example":null,"mentalModel":"Local state is a sticky note on your desk, Context is the office whiteboard, Zustand is the team's shared spreadsheet, and TanStack Query is the filing cabinet in another building with a courier that keeps copies fresh.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Local component state and when do you use it in a mobile app?"],"practice":["Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store."],"interview":["What is the difference between client state and server state?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://react.dev/learn/managing-state"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"context-for-app-wide-stable-values","slug":"context-for-app-wide-stable-values","title":"Context for app-wide stable values","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["Theme, current user and settings change rarely, so Context is fine."],"why":["Clear ownership prevents stale screens and the 'it works after I restart the app' class of bugs."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Theme, current user and settings change rarely, so Context is fine. Avoid putting fast-changing data in Context because every consumer re-renders.","example":null,"mentalModel":"Local state is a sticky note on your desk, Context is the office whiteboard, Zustand is the team's shared spreadsheet, and TanStack Query is the filing cabinet in another building with a courier that keeps copies fresh.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Context for app-wide stable values and when do you use it in a mobile app?"],"practice":["Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store."],"interview":["What is the difference between client state and server state?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://react.dev/learn/passing-data-deeply-with-context"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"client-state-with-zustand","slug":"client-state-with-zustand","title":"Client state with Zustand","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["Zustand is a small store for state that belongs to the client, such as the cart, filters or onboarding progress."],"why":["Clear ownership prevents stale screens and the 'it works after I restart the app' class of bugs."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Zustand is a small store for state that belongs to the client, such as the cart, filters or onboarding progress. It can persist to storage with middleware.","example":null,"mentalModel":"Local state is a sticky note on your desk, Context is the office whiteboard, Zustand is the team's shared spreadsheet, and TanStack Query is the filing cabinet in another building with a courier that keeps copies fresh.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Client state with Zustand and when do you use it in a mobile app?"],"practice":["Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store."],"interview":["What is the difference between client state and server state?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://zustand.docs.pmnd.rs/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"server-state-with-tanstack-query","slug":"server-state-with-tanstack-query","title":"Server state with TanStack Query","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["Data that lives on a server (lists, profiles) should be fetched and cached with TanStack Query, which gives caching, retries, background refresh and invalidation."],"why":["Clear ownership prevents stale screens and the 'it works after I restart the app' class of bugs."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Data that lives on a server (lists, profiles) should be fetched and cached with TanStack Query, which gives caching, retries, background refresh and invalidation.","example":null,"mentalModel":"Local state is a sticky note on your desk, Context is the office whiteboard, Zustand is the team's shared spreadsheet, and TanStack Query is the filing cabinet in another building with a courier that keeps copies fresh.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Server state with TanStack Query and when do you use it in a mobile app?"],"practice":["Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store."],"interview":["What is the difference between client state and server state?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://tanstack.com/query/latest"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"one-source-of-truth","slug":"one-source-of-truth","title":"One source of truth","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["Do not copy server data into a client store."],"why":["Clear ownership prevents stale screens and the 'it works after I restart the app' class of bugs."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Do not copy server data into a client store. Let the query cache own it and derive what you need.","example":null,"mentalModel":"Local state is a sticky note on your desk, Context is the office whiteboard, Zustand is the team's shared spreadsheet, and TanStack Query is the filing cabinet in another building with a courier that keeps copies fresh.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is One source of truth and when do you use it in a mobile app?"],"practice":["Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store."],"interview":["What is the difference between client state and server state?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://tanstack.com/query/latest"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"mobile-specific-wiring","slug":"mobile-specific-wiring","title":"Mobile-specific wiring","level":"intermediate","category":null,"importance":null,"difficulty":"intermediate","learn":["Connect React Query's online and focus managers to NetInfo and AppState so refetching follows the real network and app foreground state."],"why":["Clear ownership prevents stale screens and the 'it works after I restart the app' class of bugs."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Connect React Query's online and focus managers to NetInfo and AppState so refetching follows the real network and app foreground state.","example":null,"mentalModel":"Local state is a sticky note on your desk, Context is the office whiteboard, Zustand is the team's shared spreadsheet, and TanStack Query is the filing cabinet in another building with a courier that keeps copies fresh.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Mobile-specific wiring and when do you use it in a mobile app?"],"practice":["Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store."],"interview":["What is the difference between client state and server state?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a tasks app where tasks come from an API via TanStack Query and filters live in a persisted Zustand store.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://tanstack.com/query/latest/docs/framework/react/react-native"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/how-to-build-ai-chat-app-next-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]}],"updatedAt":"2026-10-23T06:00:42.996Z"}