React Hooks - это новый механизм, появившийся в React 16.8 (2019 год), который позволяет использовать состояние и другие возможности React в функциональных компонентах.

В React встроены некоторые хуки, такие как useState(), useEffect(), useContext(), useReducer() и другие. Вы также можете создавать собственные хуки для повторного использования логики между компонентами.

Хуки чувствительны к порядку выполнения:

1. Устанавливаем Dispatcher;
2. Инициализируется очередь хуков, сбрасываем количество рендеров;
3. Запускаем функцию компонента;
4. После каждого встреченного хука меняем указатель в списке хуков на +1 ;
5. После рендера смотрим, были ли изменения стейта? (useState/useReducer dispatch) - если да, то переходим на п.3 увеличивая счётчик рендеров; 25 вызовов компонентов максимально.

Последовательность хуков, формируемая React при первом рендеринге, выглядит следующим образом (представим, что прямоугольники — это хуки, каждый хук содержит указатель на следующий):

Изменили состояние компонента, обновился родительский компонент или же изменился пропс - весь код в теле выполняется при каждом обновлении.

«React следит за тем, какой компонент рендерится в данный момент.… Существует внутренний список ячеек памяти, связанных с каждым компонентом. Они являются JavaScript-объектами, в которых мы можем хранить некоторые данные. Когда вызывается некий хук, например useState(), он читает значение текущей ячейки (или инициализирует её во время первого рендера) и двигает указатель на следующую. Таким способом каждый вызов useState() получит своё независимое состояние.»

1. React узнаёт экземпляр компонента, в котором был вызван useState ;
2. useState делегирует в updateReducer действия в случае обновления (повторного рендеринга)
3. fiber-волокно будет указывать на экземпляр компонента, который вызывался useState, React ставит в очередь повторного рендеринга этого компонента , когда присваивается новое значение состояния;

«…Не вызывайте хуки внутри циклов, условных операторов или вложенных функций. Вместо этого всегда используйте хуки только внутри React-функций, до возврата какого-либо значения из них. Исполнение этого правила гарантирует, что хуки вызываются в одинаковой последовательности при каждом рендере компонента. Это позволит React правильно сохранять состояние хуков между множественными вызовами useState() и useEffect()»

Назад