State Management

// lib/queryClient.tsimport { QueryClient } from '@tanstack/react-query'
export const queryClient = new QueryClient({  defaultOptions: {    queries: {      staleTime: 1000 * 60 * 5, // 5 minutes      gcTime: 1000 * 60 * 30,   // 30 minutes (formerly cacheTime)      retry: 1,      refetchOnWindowFocus: false,    },  },})
// App.tsximport { QueryClientProvider } from '@tanstack/react-query'import { ReactQueryDevtools } from '@tanstack/react-query-devtools'import { queryClient } from './lib/queryClient'
function App() {  return (    <QueryClientProvider client={queryClient}>      <Router />      <ReactQueryDevtools initialIsOpen={false} />    </QueryClientProvider>  )}

// lib/queryKeys.tsexport const queryKeys = {  // All posts  posts: {    all: ['posts'] as const,    lists: () => [...queryKeys.posts.all, 'list'] as const,    list: (filters: PostFilters) =>      [...queryKeys.posts.lists(), filters] as const,    details: () => [...queryKeys.posts.all, 'detail'] as const,    detail: (id: number) => [...queryKeys.posts.details(), id] as const,  },
  // All users  users: {    all: ['users'] as const,    detail: (id: number) => [...queryKeys.users.all, id] as const,    posts: (userId: number) => [...queryKeys.users.all, userId, 'posts'] as const,  },}

// hooks/usePosts.tsimport { useQuery } from '@tanstack/react-query'import { queryKeys } from '@/lib/queryKeys'import { fetchPosts, fetchPost } from '@/api/posts'
export function usePosts(filters?: PostFilters) {  return useQuery({    queryKey: queryKeys.posts.list(filters ?? {}),    queryFn: () => fetchPosts(filters),  })}
export function usePost(id: number) {  return useQuery({    queryKey: queryKeys.posts.detail(id),    queryFn: () => fetchPost(id),    enabled: !!id, // Only run if id exists  })}
// Usage in componentfunction PostList() {  const { data: posts, isLoading, error } = usePosts()
  if (isLoading) return <Spinner />  if (error) return <Error message={error.message} />
  return (    <ul>      {posts?.map((post) => (        <li key={post.id}>{post.title}</li>      ))}    </ul>  )}

// hooks/useCreatePost.tsimport { useMutation, useQueryClient } from '@tanstack/react-query'import { queryKeys } from '@/lib/queryKeys'import { createPost } from '@/api/posts'
export function useCreatePost() {  const queryClient = useQueryClient()
  return useMutation({    mutationFn: createPost,    onSuccess: (newPost) => {      // Invalidate and refetch posts list      queryClient.invalidateQueries({        queryKey: queryKeys.posts.lists(),      })    },    onError: (error) => {      console.error('Failed to create post:', error)    },  })}
// Usagefunction CreatePostForm() {  const { mutate, isPending } = useCreatePost()
  const handleSubmit = (data: CreatePostData) => {    mutate(data)  }
  return (    <form onSubmit={handleSubmit}>      {/* form fields */}      <button disabled={isPending}>        {isPending ? 'Creating...' : 'Create'}      </button>    </form>  )}

export function useUpdatePost() {  const queryClient = useQueryClient()
  return useMutation({    mutationFn: updatePost,    onMutate: async (updatedPost) => {      // Cancel outgoing refetches      await queryClient.cancelQueries({        queryKey: queryKeys.posts.detail(updatedPost.id),      })
      // Snapshot previous value      const previousPost = queryClient.getQueryData(        queryKeys.posts.detail(updatedPost.id)      )
      // Optimistically update      queryClient.setQueryData(        queryKeys.posts.detail(updatedPost.id),        updatedPost      )
      return { previousPost }    },    onError: (err, updatedPost, context) => {      // Rollback on error      queryClient.setQueryData(        queryKeys.posts.detail(updatedPost.id),        context?.previousPost      )    },    onSettled: (data, error, variables) => {      // Refetch after settle      queryClient.invalidateQueries({        queryKey: queryKeys.posts.detail(variables.id),      })    },  })}

// stores/useCounterStore.tsimport { create } from 'zustand'
interface CounterState {  count: number  increment: () => void  decrement: () => void  reset: () => void}
export const useCounterStore = create<CounterState>((set) => ({  count: 0,  increment: () => set((state) => ({ count: state.count + 1 })),  decrement: () => set((state) => ({ count: state.count - 1 })),  reset: () => set({ count: 0 }),}))
// Usagefunction Counter() {  const { count, increment, decrement } = useCounterStore()
  return (    <div>      <span>{count}</span>      <button onClick={increment}>+</button>      <button onClick={decrement}>-</button>    </div>  )}

// stores/useAuthStore.tsimport { create } from 'zustand'import { persist, devtools } from 'zustand/middleware'
interface User {  id: number  name: string  email: string}
interface AuthState {  user: User | null  isAuthenticated: boolean  login: (user: User) => void  logout: () => void}
// ✅ Never persist tokens to localStorage — use HttpOnly cookies server-sideexport const useAuthStore = create<AuthState>()(  devtools(    persist(      (set) => ({        user: null,        isAuthenticated: false,
        login: (user) =>          set({            user,            isAuthenticated: true,          }),
        logout: () =>          set({            user: null,            isAuthenticated: false,          }),      }),      {        name: 'auth-storage',        // Only persist display info and auth flag — tokens must NOT be included        partialize: (state) => ({          user: state.user,          isAuthenticated: state.isAuthenticated,        }),      }    )  ))

// Use selectors to prevent unnecessary re-rendersfunction UserName() {  // Only re-renders when user.name changes  const name = useAuthStore((state) => state.user?.name)  return <span>{name}</span>}
// Multiple selectorsfunction UserInfo() {  const user = useAuthStore((state) => state.user)  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
  if (!isAuthenticated) return <LoginButton />  return <span>{user?.name}</span>}

// Server state: React Query (what comes from API)const { data: posts } = usePosts()
// Client state: Zustand (UI state)const { selectedPostId, selectPost } = useUIStore()
// Use togetherconst selectedPost = posts?.find((p) => p.id === selectedPostId)