> Как написать кастомный хук useState с колбэком при смене состояния в React (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Molecula

Стек: React

> Пример ответа

В React нет встроенного useState с колбэком, как в классовых компонентах setState(updater, callback). Однако можно написать кастомный хук, который эмулирует такое поведение. Вот пример реализации:

JAVASCRIPT
import { useState, useRef, useCallback, useEffect } from 'react';

function useStateWithCallback(initialValue) {
  const [state, setState] = useState(initialValue);
  const callbackRef = useRef(null);

  const setStateWithCallback = useCallback((newValue, callback) => {
    callbackRef.current = callback;
    setState(newValue);
  }, []);

  useEffect(() => {
    if (callbackRef.current) {
      callbackRef.current(state);
      callbackRef.current = null;
    }
  }, [state]);

  return [state, setStateWithCallback];
}

Как это работает:

Хук возвращает кортеж [state, setStateWithCallback].
setStateWithCallback принимает новое значение и опциональный колбэк.
Колбэк сохраняется в useRef, чтобы не вызывать лишних ререндеров.
useEffect срабатывает после обновления состояния и вызывает сохранённый колбэк, передавая ему актуальное значение состояния.

Пример использования:

JAVASCRIPT
function Counter() {
  const [count, setCount] = useStateWithCallback(0);

  const handleClick = () => {
    setCount(count + 1, (newCount) => {
      console.log('Состояние обновлено:', newCount);
    });
  };

  return <button onClick={handleClick}>{count}</button>;
}

Важно: Колбэк выполняется асинхронно, после того как React завершит ререндер компонента. Это соответствует поведению классового setState с колбэком.