React · Hooks (Comprehensive)

useCallback Hook

Master useCallback to memoize callback functions and prevent unnecessary re-renders in child components for optimal performance.

Find videos you like?

Save to resource drawer for future reference!

What is useCallback?

Memoizing callback functions for performance

useCallback returns a memoized callback function. It caches a function between re-renders until its dependencies change, preventing child components from re-rendering unnecessarily.

Syntax

const memoizedCallback = useCallback(() => {}

doSomething(param);

}), [dependencies]);

Without useCallback

const handleClick = () => {}

doSomething();

});

// New function every render!

Child components re-render even if nothing changed!

With useCallback

const handleClick = useCallback(() => {}

doSomething();

}), []);

// Same function reused!

Child components don't re-render unnecessarily!

When to Use?

Use useCallback when passing callbacks to optimized child components wrapped in React.memo, or when the callback is used as a dependency in other Hooks!

Step-by-Step Guide

Learn useCallback progressively

Step 1: Import useCallback

First, import useCallback from React at the top of your component file.

import React, { useCallback } from 'react';

Pro Tip

You can import multiple hooks: { useState, useEffect, useCallback }.

Step 2: Wrap Your Function

Wrap your callback function with useCallback to memoize it.

const handleClick = useCallback(() => {}

console.log('Button clicked!');

}), []); // Empty dependency array

Key Point

The function will only be recreated if dependencies in the array change!

Step 3: Add Dependencies

Include variables that your function depends on in the dependency array.

const [count, setCount] = useState(0);

const handleIncrement = useCallback(() => {}

setCount(prevCount => prevCount + 1);

}), []); // No dependencies needed

const handleSetValue = useCallback((value) => {}

setCount(value);

}), []); // Uses functional update

Important

Use functional updates (setCount(prev => prev + 1)) when possible to avoid dependencies!

Step 4: Pass to Child Components

Pass the memoized callback to child components for optimal performance.

function Parent() {}

const handleClick = useCallback(() => {}

console.log('Clicked!');

}), []);

return <Child onClick={handleClick} />;

};

const Child = React.memo(function Child({onClick})) {}

return <button onClick={onClick}>Click me</button>;

}));

Key Point

Combine useCallback with React.memo for maximum performance optimization!

Example: Optimized Component

Preventing unnecessary re-renders with useCallback

Optimized Counter with useCallback

Child component only re-renders when necessary

Frontend

function Parent() {
  const [count, setCount] = React.useState(0);
  const [name, setName] = React.useState('React');

  // Memoized callback - same function instance!
  const increment = React.useCallback(() => {
    setCount(c => c + 1);
  }, []); // Empty deps - never changes

  // This callback depends on 'name'
  const greet = React.useCallback(() => {
    alert(`Hello, ${name}!`);
  }, [name]); // Recreated when name changes

  return (
    <div className="container">
      <h1>🚀 useCallback Demo</h1>
      
      <div className="controls">
        <div className="input-group">
          <label>Name:</label>
          <input 
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Enter your name"
          />
        </div>
        
        <div className="stats">
          <div className="stat">
            <div className="label">Count</div>
            <div className="value">{count}</div>
          </div>
        </div>
        
        <div className="buttons">
          <button onClick={increment} className="btn-primary">
            Increment Count
          </button>
          <button onClick={greet} className="btn-secondary">
            Greet Me
          </button>
        </div>
      </div>

      <div className="children">
        <ChildCounter count={count} onIncrement={increment} />
        <ChildGreeter name={name} onGreet={greet} />
      </div>

      <div className="info">
        💡 Child components only re-render when their props actually change!
      </div>
    </div>
  );
}

// Memoized child components
const ChildCounter = React.memo(function ChildCounter({ count, onIncrement }) {
  const renders = React.useRef(0);
  renders.current += 1;
  
  return (
    <div className="child">
      <h3>🔢 Counter Child</h3>
      <p>Count: <strong>{count}</strong></p>
      <p>Renders: <strong>{renders.current}</strong></p>
      <button onClick={onIncrement} className="btn-child">
        Increment
      </button>
    </div>
  );
});

const ChildGreeter = React.memo(function ChildGreeter({ name, onGreet }) {
  const renders = React.useRef(0);
  renders.current += 1;
  
  return (
    <div className="child">
      <h3>👋 Greeter Child</h3>
      <p>Name: <strong>{name}</strong></p>
      <p>Renders: <strong>{renders.current}</strong></p>
      <button onClick={onGreet} className="btn-child">
        Greet
      </button>
    </div>
  );
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Parent />);

Live Preview

Loading preview...

Key Takeaways

Essential useCallback concepts to remember

Memoizes Functions

Returns same function instance between renders until dependencies change.

Prevents Re-renders

Child components with React.memo won't re-render if callback hasn't changed.

Dependency Array

Function is recreated only when dependencies in the array change.

Use Wisely

Don't use everywhere! Only when needed for performance optimization.

Performance Tool!

useCallback is a performance optimization. Use it with React.memo or when callbacks are dependencies in other Hooks!

Previous Topic

useRef Hook

Access DOM elements, store mutable values, forward refs, and advanced ref patterns.

Next Topic

useMemo Hook

Memoize expensive calculations, understand when to use useMemo vs useCallback, and performance optimization.

Ask a Question

Have a question about useCallback Hook? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Hooks (Comprehensive)

useCallback Hook

Master useCallback to memoize callback functions and prevent unnecessary re-renders in child components for optimal performance.

Find videos you like?

Save to resource drawer for future reference!

What is useCallback?

Memoizing callback functions for performance

useCallback returns a memoized callback function. It caches a function between re-renders until its dependencies change, preventing child components from re-rendering unnecessarily.

Syntax

const memoizedCallback = useCallback(() => {}

doSomething(param);

}), [dependencies]);

Without useCallback

const handleClick = () => {}

doSomething();

});

// New function every render!

Child components re-render even if nothing changed!

With useCallback

const handleClick = useCallback(() => {}

doSomething();

}), []);

// Same function reused!

Child components don't re-render unnecessarily!

When to Use?

Use useCallback when passing callbacks to optimized child components wrapped in React.memo, or when the callback is used as a dependency in other Hooks!

Step-by-Step Guide

Learn useCallback progressively

Step 1: Import useCallback

First, import useCallback from React at the top of your component file.

import React, { useCallback } from 'react';

Pro Tip

You can import multiple hooks: { useState, useEffect, useCallback }.

Step 2: Wrap Your Function

Wrap your callback function with useCallback to memoize it.

const handleClick = useCallback(() => {}

console.log('Button clicked!');

}), []); // Empty dependency array

Key Point

The function will only be recreated if dependencies in the array change!

Step 3: Add Dependencies

Include variables that your function depends on in the dependency array.

const [count, setCount] = useState(0);

const handleIncrement = useCallback(() => {}

setCount(prevCount => prevCount + 1);

}), []); // No dependencies needed

const handleSetValue = useCallback((value) => {}

setCount(value);

}), []); // Uses functional update

Important

Use functional updates (setCount(prev => prev + 1)) when possible to avoid dependencies!

Step 4: Pass to Child Components

Pass the memoized callback to child components for optimal performance.

function Parent() {}

const handleClick = useCallback(() => {}

console.log('Clicked!');

}), []);

return <Child onClick={handleClick} />;

};

const Child = React.memo(function Child({onClick})) {}

return <button onClick={onClick}>Click me</button>;

}));

Key Point

Combine useCallback with React.memo for maximum performance optimization!

Example: Optimized Component

Preventing unnecessary re-renders with useCallback

Optimized Counter with useCallback

Child component only re-renders when necessary

Frontend

function Parent() {
  const [count, setCount] = React.useState(0);
  const [name, setName] = React.useState('React');

  // Memoized callback - same function instance!
  const increment = React.useCallback(() => {
    setCount(c => c + 1);
  }, []); // Empty deps - never changes

  // This callback depends on 'name'
  const greet = React.useCallback(() => {
    alert(`Hello, ${name}!`);
  }, [name]); // Recreated when name changes

  return (
    <div className="container">
      <h1>🚀 useCallback Demo</h1>
      
      <div className="controls">
        <div className="input-group">
          <label>Name:</label>
          <input 
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Enter your name"
          />
        </div>
        
        <div className="stats">
          <div className="stat">
            <div className="label">Count</div>
            <div className="value">{count}</div>
          </div>
        </div>
        
        <div className="buttons">
          <button onClick={increment} className="btn-primary">
            Increment Count
          </button>
          <button onClick={greet} className="btn-secondary">
            Greet Me
          </button>
        </div>
      </div>

      <div className="children">
        <ChildCounter count={count} onIncrement={increment} />
        <ChildGreeter name={name} onGreet={greet} />
      </div>

      <div className="info">
        💡 Child components only re-render when their props actually change!
      </div>
    </div>
  );
}

// Memoized child components
const ChildCounter = React.memo(function ChildCounter({ count, onIncrement }) {
  const renders = React.useRef(0);
  renders.current += 1;
  
  return (
    <div className="child">
      <h3>🔢 Counter Child</h3>
      <p>Count: <strong>{count}</strong></p>
      <p>Renders: <strong>{renders.current}</strong></p>
      <button onClick={onIncrement} className="btn-child">
        Increment
      </button>
    </div>
  );
});

const ChildGreeter = React.memo(function ChildGreeter({ name, onGreet }) {
  const renders = React.useRef(0);
  renders.current += 1;
  
  return (
    <div className="child">
      <h3>👋 Greeter Child</h3>
      <p>Name: <strong>{name}</strong></p>
      <p>Renders: <strong>{renders.current}</strong></p>
      <button onClick={onGreet} className="btn-child">
        Greet
      </button>
    </div>
  );
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Parent />);

Live Preview

Loading preview...

Key Takeaways

Essential useCallback concepts to remember

Memoizes Functions

Returns same function instance between renders until dependencies change.

Prevents Re-renders

Child components with React.memo won't re-render if callback hasn't changed.

Dependency Array

Function is recreated only when dependencies in the array change.

Use Wisely

Don't use everywhere! Only when needed for performance optimization.

Performance Tool!

useCallback is a performance optimization. Use it with React.memo or when callbacks are dependencies in other Hooks!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

useRef Hook

useMemo Hook

Building Your Learning Module...

useCallback Hook

Syntax

Without useCallback

With useCallback

When to Use?

Step 1: Import useCallback

Step 2: Wrap Your Function

Step 3: Add Dependencies

Step 4: Pass to Child Components

Optimized Counter with useCallback

Memoizes Functions

Prevents Re-renders

Dependency Array

Use Wisely

Performance Tool!

useRef Hook

useMemo Hook

useCallback Hook

Syntax

Without useCallback

With useCallback

When to Use?

Step 1: Import useCallback

Step 2: Wrap Your Function

Step 3: Add Dependencies

Step 4: Pass to Child Components

Optimized Counter with useCallback

Memoizes Functions

Prevents Re-renders

Dependency Array

Use Wisely

Performance Tool!