accelint-react-best-practices

React Best Practices

Comprehensive performance optimization and best practices for React applications, designed for AI agents and LLMs working with React code.

NEVER Do React

These are the most critical anti-patterns that cause real production issues. Experts learned these the hard way through debugging sessions and performance investigations.

NEVER define components inside components — creates new component type on every render, causing full remount with state loss and DOM recreation. Results in input fields losing focus on keystroke, animations restarting unexpectedly, and useEffect cleanup/setup running on every parent render.

NEVER subscribe to searchParams/localStorage if you only read them in callbacks — causes component to re-render on every URL change or storage event even when the component doesn't display those values. Read directly in the callback instead: new URLSearchParams(window.location.search).

NEVER use object/array dependencies in useEffect — triggers effect on every render since objects are recreated with new references each time. Extract primitive values (id, name) from objects and use those as dependencies instead.

NEVER sync derived state with useState + useEffect — leads to extra re-renders, infinite loops, and stale intermediate states. Calculate derived values during render instead: const fullName = firstName + ' ' + lastName.

NEVER use client-only state (localStorage, cookies, device detection) directly in SSR components — causes hydration mismatches where server HTML doesn't match client render, resulting in React warnings, visual flickering, and broken interactivity. Use synchronous inline <script> before React hydrates.

NEVER use forwardRef in React 19+ — deprecated API. Use ref as a regular prop instead: function MyInput({ ref }) { return <input ref={ref} /> }.

NEVER create callbacks/objects/arrays inline as props to memoized components — breaks memoization since new reference is created each render. Extract to module scope, useMemo, or useCallback: const config = useMemo(() => ({ theme }), [theme]).