Creating custom hooks in React - Performance Optimization Steps

Performance: Creating custom hooks

MEDIUM IMPACT

Custom hooks affect component rendering speed and bundle size by reusing logic efficiently and avoiding unnecessary re-renders.

Reusing stateful logic across multiple components

React

function useCounter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return count;
}

function Component() {
  const count = useCounter();
  return <div>{count}</div>;
}

Extracting logic into a custom hook reduces duplication and centralizes updates, improving bundle size and render consistency.

📈 Performance GainSaves bundle size and avoids redundant effect setups, reducing render overhead.

Reusing stateful logic across multiple components

React

function Component() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <div>{count}</div>;
}

// Repeated in multiple components without abstraction

Duplicated logic in each component causes larger bundle size and harder maintenance.

📉 Performance CostAdds extra bytes to bundle and risks inconsistent updates causing unnecessary re-renders.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicated logic in components	Multiple effect setups	Multiple reflows per component	Higher paint cost due to repeated updates	[X] Bad
Custom hook with stable dependencies	Single effect setup reused	Single reflow per update	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

Custom hooks run during React's render phase to prepare state and effects. Proper design minimizes extra state updates and effect executions, reducing layout recalculations and paints.

→Render

→Commit

→Layout

→Paint

⚠️ BottleneckExcessive state updates inside hooks causing repeated Layout and Paint stages.

Core Web Vital Affected

INP

Custom hooks affect component rendering speed and bundle size by reusing logic efficiently and avoiding unnecessary re-renders.

Optimization Tips

1Extract reusable logic into custom hooks to reduce code duplication and bundle size.

2Use stable primitive values as dependencies to avoid unnecessary effect executions.

3Avoid side effects inside hooks that cause frequent state updates triggering re-renders.

Performance Quiz - 3 Questions

What is a key performance benefit of using custom hooks in React?

A They automatically cache all API responses.

B They reduce code duplication and prevent unnecessary re-renders.

C They increase bundle size by adding more code.

D They force components to render synchronously.

DevTools: React DevTools Profiler

How to check: Record a profiling session while interacting with components using custom hooks. Look for repeated renders and effect executions.

What to look for: High render counts or frequent effect calls indicate inefficient hooks causing performance issues.