Reusing logic with hooks in React - Performance & Optimization

Performance: Reusing logic with hooks

MEDIUM IMPACT

This affects interaction responsiveness and rendering efficiency by reducing unnecessary component updates and re-renders.

Sharing stateful logic across multiple components

React

function useCounter() {
  const [count, setCount] = React.useState(0);
  const increment = React.useCallback(() => setCount(c => c + 1), []);
  return { count, increment };
}

function ComponentA() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>Count: {count}</button>;
}

function ComponentB() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>Count: {count}</button>;
}

Extracting logic into a custom hook avoids code duplication and ensures consistent state management with memoized callbacks.

📈 Performance GainSaves bundle size and improves INP by reducing unnecessary re-renders and re-creating functions.

Sharing stateful logic across multiple components

React

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

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

Duplicating state logic in multiple components causes repeated code and separate state management, increasing bundle size and potential bugs.

📉 Performance CostAdds extra bundle size and causes independent re-renders for each component.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicated state logic in components	Multiple independent states	Multiple reflows per component update	Higher paint cost due to repeated renders	[X] Bad
Custom hook with memoized callbacks	Single state logic reused	Single reflow per state update	Lower paint cost due to fewer renders	[OK] Good

Rendering Pipeline

Custom hooks encapsulate state and logic, so React only re-renders components when state changes. Memoizing callbacks reduces layout recalculations and paint.

→JavaScript Execution

→Reconciliation

→Layout

→Paint

⚠️ BottleneckReconciliation stage due to unnecessary re-renders if hooks are not optimized

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering efficiency by reducing unnecessary component updates and re-renders.

Optimization Tips

1Extract reusable logic into custom hooks to avoid code duplication.

2Use React.useCallback inside hooks to memoize functions and prevent unnecessary re-renders.

3Monitor component re-renders with React DevTools Profiler to ensure hooks improve performance.

Performance Quiz - 3 Questions

What is a main performance benefit of using custom hooks to reuse logic in React?

A Triggers more layout recalculations

B Increases bundle size by adding more code

C Reduces code duplication and prevents unnecessary re-renders

D Blocks rendering until all hooks finish

DevTools: React DevTools and Performance panel

How to check: Open React DevTools Profiler, record interactions, and observe component re-render counts and durations. Use Performance panel to check layout and paint times.

What to look for: Look for fewer component re-renders and shorter interaction times indicating better INP and less layout thrashing.