React Performance Essentials

Derive values instead of syncing state#

Copying props or other state into useState and keeping it in sync with useEffect causes an extra render and stale values. If something can be computed from what you already have, compute it during render.

1// ✗ extra render, can drift out of sync2const [visible, setVisible] = useState(items);3useEffect(() => {4  setVisible(items.filter((item) => item.category === filter));5}, [items, filter]);67// ✓ derived during render8const visible = items.filter((item) => item.category === filter);

Subscribe to the smallest slice of a store#

Reading a whole Zustand store re-renders the component on every change — including keystrokes. Select only what you render; use useShallow when you need several fields at once.

1import { useShallow } from "zustand/react/shallow";23// ✗ re-renders whenever anything changes4const { language, theme } = useCodeEditorStore();56// ✓ re-renders only when these values change7const language = useCodeEditorStore((state) => state.language);8const { fontSize, wordWrap } = useCodeEditorStore(9  useShallow((state) => ({10    fontSize: state.fontSize,11    wordWrap: state.wordWrap,12  }))13);

Memoize on purpose#

• useMemo for genuinely expensive work (parsing, tokenizing, large filters) — not for every value.
• memo() for components that receive stable props but sit under a frequently re-rendering parent.
• useCallback only when the function is a dependency of an effect or a prop of a memoized child.
• Measure with the React DevTools Profiler before and after.

Load heavy code on demand#

Editors, charts and 3D scenes can weigh hundreds of kilobytes. next/dynamic splits them into their own chunk and renders a placeholder meanwhile.

1import dynamic from "next/dynamic";23const CodeEditor = dynamic(4  () => import("@/features/code-editor/components/editor-surface").then(5    (mod) => mod.EditorSurface6  ),7  { ssr: false, loading: () => <EditorSkeleton /> }8);

Lists and keys#

Use stable, unique ids as keys. Array indexes are only safe for lists that never reorder, filter or insert; otherwise React reuses the wrong DOM nodes and state.

For thousands of rows, paginate or virtualize (for example with @tanstack/react-virtual) so the DOM only contains what is on screen.