Как правильно написать react хук?

Question

[Максим]

есть компонент - кнопка, в одном случае при клике мы вызываем один обработчик(который формируется через react.useCallback), в другом случае вызываем второй обработчик(тоже формируется через react.useCallback). Но как мы знаем, в правилах нельзя менять последовательность вызовов хуков, как быть?

Answer 1

[Robur]

А как вызов обработчиков влияет на вызов хуков?
вызывайте всегда оба хука всегда, а обработчики можете вызывать как угодно и в любом порядке

Answer 2

[Владимир Проскурин]

Определить третий useCallback, и в нем по условию вызывать один из callback'ов. Ну, или в месте передачи callback'а передавайте его по условию.

Comments

[Максим]

получается у нас сначала вызывается 3ий хук, а потом 1 или 2ой, что тоже нарушает правила хуков. если стразу вызывать, то представим, что у нас 20 обработчиков и все они будут в 1 месте, что тоже плохо

[Владимир Проскурин]

Я имел ввиду вот так https://jsfiddle.net/avn29geL/
Но сейчас я понял, что я не понял, что значит нельзя менять последовательность вызовов хуков?

[Yustas Alexu]

Этот код можно намного упростить делая

const toggleOpen = useCallback(() => setIsOpen(!isOpen), [isOpen])

[Владимир Проскурин]

Yustas Alexu, нет, это же демонстрация двух колбэков, там для примера я взял переключатель. Да и тогда уж setIsOpen(isOpen => !isOpen), чтобы батч был не страшен.