Frontend State Strategy

Decision Tree

Is it server data? → React Query
Is it global UI state? → Zustand/Context
Is it local to component? → useState
Is it derived? → useMemo

Example

// Local
const [count, setCount] = useState(0);

// Global
const theme = useThemeStore(state => state.theme);

// Server
const { data: user } = useQuery('user', fetchUser);

// URL
const [searchParams] = useSearchParams();

Resources

• Prefer local state
• Server state separate from client state
• Use Context sparingly