React useCallback Hook

• useCallback is a React hook that memoizes a callback function to prevent unnecessary re-creation of the function on each render.

Purpose

• Useful when passing callbacks to child components to prevent unnecessary re-renders.
• Optimizes performance by memoizing the callback function, especially in scenarios where the callback's identity is crucial.

Syntax

• Import useCallback from the 'react' library.
• Use useCallback with the callback function and a dependency array to memoize the function.

import React, { useCallback } from 'react';

const memoizedCallback = useCallback(
  () => {
    // Callback logic
  },
  [dependency1, dependency2]
);

Memoized Callback

• Use useCallback to memoize a callback function.

import React, { useState, useCallback } from 'react';

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

  // Without useCallback, a new function would be created on every render
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <h2>Example: Memoized Callback</h2>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Passing Callback to Child Component

• Use useCallback when passing a callback to a child component to avoid unnecessary re-renders.

import React, { useState, useCallback } from 'react';

const ChildComponent = ({ onClick }) => {
  return <button onClick={onClick}>Click Me</button>;
};

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

  // Without useCallback, passing the callback directly would cause re-renders
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <h2>Example: Passing Callback to Child Component</h2>
      <p>Count: {count}</p>
      <ChildComponent onClick={increment} />
    </div>
  );
};

 

Summary

useCallback is particularly useful in scenarios where the identity of the callback matters to prevent unnecessary re-renders and improve performance.