React – Performance

Rules

• Wrap expensive calculations in useMemo
• Wrap callbacks passed as props in useCallback
• Use React.memo() on pure presentational components
• Lazy-load routes with React.lazy() + Suspense
• Avoid inline object/array literals and anonymous functions in JSX

useMemo and useCallback Example

// Correct
const expensiveValue = useMemo(() => computeExpensiveValue(data), [data]);
const handleClick = useCallback(() => onClose(id), [id, onClose]);

// Incorrect — creates new reference on every render
<MyComponent style={{ color: 'red' }} onClick={() => onClose(id)} />

Lazy Loading Example

// Correct
const UserProfile = React.lazy(() => import('./UserProfile'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserProfile />
    </Suspense>
  );
}