useCallback hook in React - Performance & Optimization

Performance: useCallback hook

MEDIUM IMPACT

This affects interaction responsiveness by preventing unnecessary function recreations and re-renders in React components.

Passing a callback function to a child component that depends on props or state

React

function Parent() {
  const [count, setCount] = React.useState(0);
  const handleClick = React.useCallback(() => {
    console.log('Clicked', count);
  }, [count]);
  return <Child onClick={handleClick} />;
}

Memoizes handleClick so it only changes when count changes, reducing unnecessary Child re-renders.

📈 Performance GainReduces Child re-renders, improving interaction responsiveness and lowering CPU usage.

Passing a callback function to a child component that depends on props or state

React

function Parent() {
  const [count, setCount] = React.useState(0);
  const handleClick = () => {
    console.log('Clicked', count);
  };
  return <Child onClick={handleClick} />;
}

The handleClick function is recreated on every render, causing Child to re-render even if props/state didn't change.

📉 Performance CostTriggers re-render of Child component on every Parent render, increasing INP and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Passing new function each render	Causes child re-render and possible DOM updates	Multiple reflows if child updates layout	Higher paint cost due to re-render	[X] Bad
Memoizing function with useCallback	Child re-renders only when dependencies change	Fewer reflows as layout stable	Lower paint cost due to fewer updates	[OK] Good

Rendering Pipeline

When a component renders, React recreates functions unless memoized. Recreated functions passed as props cause child components to re-render, triggering layout and paint again.

→React Reconciliation

→Layout

→Paint

⚠️ BottleneckReact Reconciliation due to unnecessary re-renders from new function references

Core Web Vital Affected

INP

This affects interaction responsiveness by preventing unnecessary function recreations and re-renders in React components.

Optimization Tips

1Memoize functions with useCallback when passing them as props to avoid extra child re-renders.

2Include all dependencies in useCallback dependency array to keep function references accurate.

3Avoid overusing useCallback on functions that do not cause re-renders to reduce complexity.

Performance Quiz - 3 Questions

What is the main performance benefit of using useCallback in React?

A It reduces the size of the JavaScript bundle.

B It prevents unnecessary function recreations and reduces child component re-renders.

C It speeds up initial page load by lazy loading components.

D It automatically caches API responses.

DevTools: React DevTools and Chrome Performance

How to check: Use React DevTools Profiler to record renders and check if child components re-render unnecessarily when parent state changes. Use Chrome Performance tab to see layout and paint events.

What to look for: Look for repeated renders of child components without prop changes and excessive layout/paint events indicating wasted work.