В чем разница между useMemo и useCallback

Ответ

useMemo и useCallback оба оптимизируют производительность, но решают разные задачи:

  • useMemo кэширует результат вычислений и возвращает его, пока зависимости не изменились.
    Пример:

    const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  • useCallback кэширует саму функцию, а не её результат. Полезно для передачи стабильных колбэков дочерним компонентам.
    Пример:

    const memoizedCallback = useCallback(() => { doSomething(a, b) }, [a, b]);

Ключевое отличие:

  • useMemo — для значений,
  • useCallback — для функций.

Оба предотвращают лишние ререндеры, но только если зависимости остаются прежними.