react-best-practices

Core Rules

1. Rendering Optimization

• React Server Components (RSC): Favor RSC for data fetching by default. Use "use client" only for interactivity or browser-only APIs.
• Hydration: Minimize the waterfall by using Suspense and streaming. Never perform state updates in useEffect that could be handled during rendering.
• Memoization: Avoid useMemo and useCallback for trivial operations. Use them only when referential equality is required to prevent expensive re-renders in deep trees.

2. State Management (The Antigravity Way)

• Server State: MANDATORY use of TanStack Query. Disable refetchOnWindowFocus for data that rarely changes.
• URL as State: Use search parameters (URL) for UI state like filters, tabs, and pagination to ensure shareability.
• Local UI State: Use useOptimistic for instant feedback on mutations.

3. Styling & Layout

• Tailwind CSS: Use the clsx and tailwind-merge pattern for dynamic class strings.
• Images: Use next/image for automatic optimization. Always provide width, height, and alt.
• Layouts: Use the Next.js layout.tsx pattern for persistent navigation and persistent state.