How do you decide where to keep state in a React app: local state, context, a store, or a server-cache library?
What the interviewer wants to hear
- Keep state local by default and lift only when needed
- Separate server state from client UI state
- Use a server-cache library like TanStack Query for API data
- Context for rarely-changing global values like theme or user
- A store like Zustand or Redux for complex shared client state
- URL for state that should be shareable, like filters
Model answer
I start with local state and only move it higher when another component truly needs it. Then I separate two kinds of state. Server state is data from APIs: it needs caching, refetching, loading and error states, so I use TanStack Query or the framework data layer instead of putting it in a global store. Client UI state, like a modal being open, usually stays local. For values that many components read but that rarely change, like theme, locale or the logged-in user, React context works well. If there is complex client state shared across many screens, such as a multi-step editor, I use a small store like Zustand or Redux Toolkit, which also avoids context re-render issues. Filters and pagination often belong in the URL so users can share and refresh them.
Can you answer it under time pressure?
Take a timed medium round and get scored on every answer.
More medium Frontend Developer questions
- Explain the JavaScript event loop, including microtasks and macrotasks.
- A page has a poor LCP score. How would you investigate and fix it?
- What testing strategy would you use for a frontend application?
- Explain client-side rendering, server-side rendering and static site generation. When would you use each?
- What happens between typing a URL in the browser and seeing the page rendered? Focus on the frontend side.
- A React screen feels slow. How do you find and reduce unnecessary re-renders?
- How do you handle loading, error and empty states when a screen fetches data from an API?
- How do you use TypeScript effectively in a React codebase?
- How would you handle user authentication and tokens in a single-page app or Next.js frontend?