useCallback hook in React js 2025
useCallback Hook in React JS 2025
`useCallback` is a React Hook that returns a memoized version of the callback function. It's mainly used to prevent unnecessary re-creation of functions during re-renders — especially helpful when passing callbacks to child components that rely on reference equality to avoid re-renders.
import React, { useState, useCallback } from 'react';
const ExpensiveComponent = React.memo(({ onClick }) => {
console.log('ExpensiveComponent rendered');
return ;
});
export default function App() {
const [count, setCount] = useState(0);
const [value, setValue] = useState('');
const handleClick = useCallback(() => {
console.log('Button clicked!');
}, []);
return (
useCallback Hook Example
setValue(e.target.value)}
placeholder="Type something"
className="border p-2 rounded mb-4 w-full"
/>
🧠 Why useCallback?
- It helps avoid unnecessary re-renders of child components.
- Keeps function reference stable unless its dependencies change.
✅ When to use:
- When passing callbacks to memoized components (React.memo).
- When callback functions are heavy and don’t need to be recreated on every render.