useCallback

Code

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

// Child component (memo optimized)
const Button = memo(function Button({ onClick, label }) {
    console.log('Button render:', label);
    return <button onClick={onClick}>{label}</button>;
});

function Toolbar() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');

    // Without useCallback: new function every render
    // const handleClick = () => setCount(c => c + 1);

    // With useCallback: stable reference
    const handleClick = useCallback(() => {
        setCount(c => c + 1);
    }, []);

    const handleChange = useCallback((e) => {
        setText(e.target.value);
    }, []);

    return (
        <div>
            <p>Count: {count}</p>
            <Button onClick={handleClick} label="Increment" />
            <input value={text} onChange={handleChange} />
        </div>
    );
}

// Dependency parameter
function SearchBar({ onSearch }) {
    const [query, setQuery] = useState('');

    const handleSearch = useCallback(() => {
        onSearch(query);
    }, [query, onSearch]);

    return (
        <div>
            <input value={query} onChange={e => setQuery(e.target.value)} />
            <button onClick={handleSearch}>Search</button>
        </div>
    );
}

Explanation

useCallback memoizes function references, working with memo child components to avoid unnecessary re-renders.

More React Snippets