react-conventions

To stop using useMemo and useCallback manually, adopt React Compiler-friendly patterns by writing functional components with hooks and letting the compiler handle performance optimization automatically. This removes manual memoization overhead.

React Compiler-friendly patterns require functional components with explicit TypeScript prop typing, one main export per file, colocated tests, and consistent hook dependency arrays. This ensures the compiler can safely optimize renders.

Yes, the React Compiler works with Tailwind CSS and Zustand. Conventions enforce consistent styling approaches and Zustand store composition patterns that remain compatible with compiler-driven optimization.

Refactor components by converting to functional components with hook-based state, removing manual memoization wrappers, adding explicit TypeScript prop typings, and annotating side-effect intent to align with React Compiler guidance.

The React Compiler requires consistent hook dependency arrays to safely optimize component renders and prevent stale closures. Clear side-effect intent comments help the compiler understand execution order.

You should avoid manual memoization when using the React Compiler, as it automatically optimizes performance for functional components. Manual useMemo, useCallback, and memo wrappers become unnecessary overhead.