Как написать useBooleanState с удобными действиями

Условие

Реализуйте hook useBooleanState(initial = false), возвращающий {value, toggle, setTrue, setFalse}. Действия должны иметь стабильные ссылки, а toggle — работать с актуальным состоянием.

Ответ

Используйте useState и useCallback; toggle должен обновлять состояние функционально. Тогда ему не требуется замыкать value в зависимостях.

Реализация:

import { useState, useCallback } from 'react';
export function useBooleanState(initial = false) {
  const [value, setValue] = useState(initial);
  const toggle = useCallback(() => setValue(v => !v), []);
  const setTrue = useCallback(() => setValue(true), []);
  const setFalse = useCallback(() => setValue(false), []);
  return { value, toggle, setTrue, setFalse };
}

Initial используется при создании состояния, а не для автоматической синхронизации последующих props.