Корректировать недочёты

Условие

Сможет ли React трактовать функцию useIncrement как пользовательский хук?

const useIncrement = (start) => start + 1;

function ExampleComponent() {
    const count = useIncrement(0);

    return (
        <div>
            <p>Count: {count}</p>
        </div>
    );
}

export default ExampleComponent;

Ответ

Имя useIncrement соответствует соглашению о хуках, но React не создаёт состояние из-за названия функции. Здесь это обычное вычисление: при каждом рендере count равен 1.

Ошибки выполнения в данном коде нет. Функция не вызывает useState или другие хуки и не увеличивает значение между рендерами, поэтому понятнее назвать её increment. Если нужен настоящий счётчик, требуется состояние:

function useIncrement(start) {
  const [count, setCount] = useState(start);
  const increment = () => setCount(value => value + 1);
  return [count, increment];
}

Такой хук вызывают на верхнем уровне компонента, а increment передают кнопке. Импорт useState нужен отдельно. Название use помогает инструментам проверять правила, но не является механизмом хранения данных.