State Management

Interview Questions: URL State, Context, and Server State

Q1: Why is URL State preferred over React State for filters and pagination?

Shareability: Users can copy and share the URL with the exact filters applied.

Bookmarkability: Users can bookmark the search results.

Server Rendering: The server can read the URL parameters (searchParams) and render the initial HTML with the correct data, avoiding a loading spinner on hydration.

Q2: How do you share state between Server and Client Components?

You cannot pass state directly from Client to Server (the boundary is one-way). However, you can pass data from Server to Client as props.

Pattern:

  1. Fetch data in a Server Component.
  2. Pass it as a prop to a Client Component (Context Provider).
  3. The Client Component uses useState to initialize its state with the server data.

Note: Props passed from Server to Client must be serializable (JSON-like).

Q3: Is Redux or Zustand still relevant in Next.js App Router?

Less Relevant: Much of what we used global state for (server data caching) is now handled by Next.js fetch cache and React Query.

Still Useful: For complex client-only state that doesn't need to persist in the URL, like a complex multi-step form wizard, a music player state, or a shopping cart that persists across navigation.