Custom hook best practices in React - Performance & Optimization

Performance: Custom hook best practices

MEDIUM IMPACT

Custom hooks affect interaction responsiveness and rendering efficiency by managing state and side effects cleanly.

Sharing reusable logic without causing extra renders

React

function useData() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  return data;
}

Using useEffect with an empty dependency array runs fetch only once, avoiding repeated network calls and re-renders.

📈 Performance Gainsingle network request and minimal re-renders

Sharing reusable logic without causing extra renders

React

function useData() {
  const [data, setData] = React.useState(null);
  fetch('/api/data').then(res => res.json()).then(setData);
  return data;
}

Fetching data directly in the hook body causes the fetch to run on every render, triggering many state updates and re-renders.

📉 Performance Costtriggers multiple re-renders and network requests per component render

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fetching data in hook body	Minimal DOM changes	Multiple re-renders	Multiple paints	[X] Bad
Fetching data inside useEffect	Minimal DOM changes	Single re-render	Single paint	[OK] Good
State update in hook body	No DOM changes	Infinite re-renders	Continuous paints	[X] Bad
State update inside useEffect	No DOM changes	Single re-render	Single paint	[OK] Good
Inline function in hook	No DOM changes	Extra child re-renders	Extra paints	[X] Bad
Memoized function with useCallback	No DOM changes	Minimal re-renders	Minimal paints	[OK] Good

Rendering Pipeline

Custom hooks manage state and side effects that influence React's render cycle. Poor hook design can cause repeated state updates triggering multiple render passes and layout recalculations.

→JavaScript Execution

→React Reconciliation

→Layout

→Paint

⚠️ BottleneckReact Reconciliation due to repeated state changes causing many renders

Core Web Vital Affected

INP

Custom hooks affect interaction responsiveness and rendering efficiency by managing state and side effects cleanly.

Optimization Tips

1Run side effects like data fetching inside useEffect with proper dependencies.

2Avoid state updates directly in the hook body to prevent infinite render loops.

3Memoize functions returned from hooks with useCallback to reduce child re-renders.

Performance Quiz - 3 Questions

What is the best way to run a data fetch inside a custom hook to avoid multiple network requests?

A Run fetch inside a callback without dependencies

B Run fetch directly in the hook body

C Run fetch inside useEffect with empty dependency array

D Run fetch inside useMemo

DevTools: React DevTools and Chrome Performance

How to check: Use React DevTools Profiler to record interactions and check how many times components re-render. Use Chrome Performance tab to see scripting and rendering times.

What to look for: Look for excessive renders or repeated state updates causing long scripting times and layout thrashing.