state-management

To separate server and client state in React, enforce a clear architectural boundary by using TanStack Query for server data caching and refetching, while reserving Zustand for global client UI synchronization. This prevents over-engineering and eliminates manual useEffect data fetching.

Use URL parameters for persistent UI state when you need shareable, bookmarkable filter criteria, such as dashboard filters. Use Zustand when state requires global synchronization across multiple components without persisting in the browser URL.

The best way to refactor manual useEffect data fetching is to replace it with TanStack Query hooks, which handle server state caching, background refetching, and optimistic updates natively, eliminating manual loading and error state management.

Zod validates form state by enforcing schema-defined runtime type checking before submission, ensuring data integrity. It integrates directly with form state to prevent invalid data from propagating to server or client state layers.

Yes, a decision tree is necessary to determine whether local React hooks suffice for component-level state or if Zustand is required for global UI synchronization, preventing unnecessary state hoisting and ensuring maintainable frontend architecture.