Why custom hooks are used in React - Performance Evidence

Performance: Why custom hooks are used

MEDIUM IMPACT

Custom hooks affect component rendering efficiency and code reuse, impacting interaction responsiveness and bundle size.

Reusing stateful logic across multiple components

React

function useCounter() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('Count changed:', count);
  }, [count]);
  return [count, setCount];
}

function ComponentA() {
  const [count, setCount] = useCounter();
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

function ComponentB() {
  const [count, setCount] = useCounter();
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Extracts shared logic into a single reusable hook, reducing code duplication and ensuring consistent behavior.

📈 Performance GainReduces bundle size slightly and improves maintainability, leading to fewer bugs and smoother updates.

Reusing stateful logic across multiple components

React

function ComponentA() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('Count changed:', count);
  }, [count]);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

function ComponentB() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('Count changed:', count);
  }, [count]);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Duplicated state and effect logic in multiple components causes more code and potential inconsistent updates.

📉 Performance CostIncreases bundle size and may cause redundant renders if logic is not consistent.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicated state logic in components	Multiple state hooks per component	Multiple re-renders on state change	Higher paint cost due to redundant updates	[X] Bad
Custom hook for shared logic	Single state hook reused	Fewer re-renders due to consistent logic	Lower paint cost with optimized updates	[OK] Good

Rendering Pipeline

Custom hooks encapsulate state and side effects, affecting the React rendering lifecycle by controlling when components re-render and update.

→Component Render

→State Update

→Effect Execution

⚠️ BottleneckUnnecessary re-renders caused by duplicated or poorly optimized state logic

Core Web Vital Affected

INP

Custom hooks affect component rendering efficiency and code reuse, impacting interaction responsiveness and bundle size.

Optimization Tips

1Use custom hooks to avoid repeating stateful logic in multiple components.

2Centralize side effects in custom hooks to reduce inconsistent updates.

3Monitor component renders with React Profiler to verify performance improvements.

Performance Quiz - 3 Questions

How do custom hooks improve React app performance?

A By reusing stateful logic and reducing code duplication

B By increasing the number of components rendered

C By blocking rendering until all hooks finish

D By adding more event listeners to the DOM

DevTools: React DevTools Profiler

How to check: Record interactions and look for repeated renders of components using duplicated logic versus those using custom hooks.

What to look for: Lower render counts and faster update times indicate better performance with custom hooks.