REACT
Let the React Compiler memoize instead of hand-writing useMemo/useCallback
app/components/ProductList.tsx
tsx// With the React Compiler enabled, this component is
// auto-memoized — no useMemo/useCallback needed.
function ProductList({ products, onSelect }: Props) {
const sorted = products
.slice()
.sort((a, b) => a.price - b.price)
return sorted.map((p) => (
<ProductCard key={p.id} product={p} onSelect={onSelect} />
))
}The React Compiler analyzes your components and automatically memoizes values and callbacks at build time, following the Rules of React. Once it's enabled, most manual `useMemo`/`useCallback` becomes redundant — and hand-memoizing on top of it adds noise without measurable benefit. Keep components pure and follow the rules so the compiler can do its job; reserve manual memoization for the rare case profiling proves the compiler missed.
react19react-compilerperformancememoization