import {
useState, useRef, useCallback, useEffect
} from 'react';
export function useStateWithCallback <T> (initialState: T | (() => T), alwayExecuteCallback: boolean = false): [T, (newState: T, callback: (state?: T) => void) => void] {
// Хук работает следующим образом.
// Сначала он вызывает стандартный хук useState() до первого рендеринга для создания стартового состояния state и функции setState() для его последующего изменения.
// Для того, чтобы сделать изменение состояния state, будет вызываться возвращаемая функция setStateCallback(), которая записывает в ref переданную функцию callback(), чтобы ее потом можно было вызвать внутри useEffect().
// Далее вызов переданной функции callback() будет производиться внутри useEffect(), вызываемого после каждого рендеринга компонента, вызванного изменением состояния state.
// Создание стартового состояния и функции для его последующего изменения.
const [state, setState] = useState<T>(initialState);
// Ссылка на функцию callback(), которая будет вызываться внутри useEffect() после изменения состояния state.
const callbackRef: React.MutableRefObject<((state: T) => void) | undefined> = useRef<((state: T) => void) | undefined>(undefined);
// Функция изменения состояния и установки ссылки на переданную функцию обратного вызова.
// С помощью useCallback() выполняется мемоизация функции при первом рендеринге компонента с целью оптимизации для того, чтобы функция каждый раз не создавалась при вызове хука useStateWithCallback().
const setStateCallback = useCallback(function setStateCallback (newState: T, callback: (state?: T) => void): void {
callbackRef.current = callback; // Переданную функцию callback нужно передать в ref, чтобы во время выполнения useEffect() достать её оттуда.
setState(newState); // Вызвать обновление состояния, которое затем приведет к вызову useEffect().
}, []);
useEffect(function (): void {
// При первом рендере ссылка callbackRef.current равна undefined. Она становится равна функции callback() после того, как будет во внешнем коде вызвана функция setStateCallback().
if (callbackRef.current) {
callbackRef.current(state); // Вызываем переданную функцию callback().
callbackRef.current = undefined; // Удаляем ссылку на функцию callback() после того, как она выполнилась, для того, чтобы она не вызывалась повторно при следующем выполнении хука useEffect().
}
}, alwayExecuteCallback ? undefined : [state]); // eslint-disable-line react-hooks/exhaustive-deps
return [state, setStateCallback]; // Возвращаем из хука аналоги стандартных state и setState с возможностью вызова функции callback().
}
// Пример использования хука useStateWithCallback.
// const [value, setValue] = useStateWithCallback(1);
// setValue(2, function callback (state) {console.log(state);}); // В консоль будет выведено: 2
