useCallback

By default, React re-creates function definitions on every render. useCallback caches a function definition between renders, returning the exact same function instance as long as its dependencies do not change.

Note: Typically used to pass stable function references to React.memo components or as useEffect dependencies.

import { useEffect, useCallback } from 'react';

const Component = () => {
    // Preserved function reference across re-renders
    const fetchData = useCallback(() => {
        fetch('/api').then(...);
    }, []);

    // Prevents infinite re-triggering since fetchData maintains a stable reference
    useEffect(() => {
        fetchData();
    }, [fetchData]);
};