🪝 ReactJS – useCallback Hook

What is useCallback in React?

The useCallback hook returns a memoized function. It is useful when passing callbacks to child components that rely on reference equality to prevent unnecessary re-renders.

The useCallback and useMemo hooks are similar:

• useMemo → returns a memoized value.
• useCallback → returns a memoized function.

const memoizedFn = useCallback(() => {
  // logic here
}, [dependencies]);

- Callback Function: The function you want to memoize.
- Dependencies: The function is re-created only when dependencies change.

In this example, the Learning function is recreated every time the parent App re-renders. This causes the child component to re-render unnecessarily even if Learning does not change.

Here, useCallback ensures that Learning function is memoized. It will only re-create if dependencies change, preventing unnecessary child re-renders.

1. React renders the parent component (App).
2. The Learning function is created.
3. If useCallback is used, the same function reference is reused unless dependencies change.
4. The child component (ChildA) receives props.
5. Because of React.memo, ChildA only re-renders if props actually change.