Why identify state categories first?
Because categorizing tells you which tool suits each. Local UI flags use useState, widely-shared state uses Context, and fetched data uses React Query. Without categorizing, you risk putting everything in one tool and creating re-renders or sync bugs.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Roadmap: State and Data Flow for a React UI
State and data flow: identify the state, keep local state local, lift shared state to a common parent, use Context for widely-shared data, handle server state with React Query, pass data between screens appropriately, and keep one source of truth.
After you have local state working and see what is genuinely shared. Put auth, theme, and other widely-shared, rarely-changed state in Context, and split Contexts by change rate to avoid unnecessary re-renders.
To handle server state properly: caching, invalidation, and loading states. Treating fetched data like local state means you write more boilerplate and miss these features. React Query removes most of that work.
Still have questions?
Browse all our FAQs or reach out to our support team