react

React Best Practices Audit

Focused audit layer for React and Next.js runtime/rendering issues. Start with the universal checks, then route to the reference that matches the user's specific question.

Universal Checks (no exceptions — run these every time)

These checks take seconds to scan for and catch common high-impact mistakes. Skip them only if you have already verified them in the same session.

1. Components defined inside other components They are re-created on every render; state resets and memoization is lost. Extract to module scope.

2. Array index as key in dynamic lists key is React's identity anchor. When lists reorder, insert, or delete, an index key reassigns identity to the wrong element. Use a stable ID from the data. Exception: truly static, never-reordered lists.

3. Derived state via useState + useEffect If state is only a calculation from props/state, compute it during render (optionally useMemo for expensive work) instead of syncing with an Effect.

4. Data fetching in useEffect without cleanup Slow responses can overwrite fresh data. Use cleanup/cancellation, TanStack Query, or Server Components so stale requests cannot win the race.

5. Unmemoized Context provider value New object/function references make every consumer re-render. Memoize the provider value or split data and API contexts.

6. Server Actions for client-side data reads Server Actions serialize calls and are for mutations. Reads should use RSC, route handlers, or a client data layer that can parallelize and dedupe.

7. React.FC and forwardRef as default patterns Prefer plain function components. React.FC adds noise and misleading children behavior; React 19 makes ref a normal prop for new code. Load the React 19 reference for version-specific migration details.

Ownership Boundary with Frontend

react owns React runtime/rendering issues: Effects, re-renders, Context, keys, Server Actions, hydration, React 19 APIs, waterfalls, and bundle/runtime performance. frontend owns broader TypeScript, UI accessibility, browser security, Next.js file boundaries, Tailwind/component API patterns, and frontend file structure.