Hooks

Question 1

Что такое хук?

Answer 1

Хук - это функция, которая расширяет функциональность компонента-функции.
Хуки возможно использовать только в функциональных компонентах.
Хуки должны быть безусловно вызваны между перерисовками.

Question 2

Зачем сделали хуки?

Answer 2

У классовых компонентов есть ряд недостатков:
1. Сложность переиспользования поведения: необходимо создать старший компонент.
2. Сложность использования методов жизненного цикла, так как они включают в себя большое количество кода
3. Сложность разбиения логики на несколько компонентов, когда необходимо пердавать данные и обработчики
4. Сложность работы с кодом: обязательная привязка this к методам
5. Сложность тестирования: компоненты, разбитые на несколько частей необходимо тестировать как целые части интерфейса
6. Недостатки оптимизации классовых компонентов: классы компилируются в избыточный код
7. Избыточность классов: занимают больше памяти и вызывают лишние методы и проверки
8. Избыточность кода для простых манипуляций: логику можно писать в методах жизненного цикла

Question 3

Что такое кастомный хук?

Answer 3

Кастомный хук - это функция, которая вызывает React-хуки в своем коде. Применяются для создания переиспользуемой логики.

Question 4

Как работает useState?

Answer 4

Хук useState возвращает состояние и метод для изменения состояния, может принимать любое значение, либо функцию-инициализатор.
const [value, SetValue] = useState(initial | () => initial)
Метод изменения состояния принимает новое состояние или коллбек с аргументом предыдущего состояния.
Изменение состояния перерисовывает компонент.

Question 5

Как работает useContext?

Answer 5

Хук useContext позволяет привязать компонент к внешнему состоянию компонента-провайдера.
const context = useContext(Context). Если внешнего компонента-провайдера нет в дереве, то возвращается дефолтное значение контекста.

Question 6

Как работает useEffect?

Answer 6

Хук useEffect возволяет создавать реакции на монтирование, размонтирование и обновление компонента.
~~~
useEffect(() => {
fetchOnUpdate()
return () => {
fetchOnUnmmount()
}
}, [propVal, stateVal])
~~~
Первый аргумент - это коллбек для создания побочных эффектов.
Второй аргумент - массив зависимостей.
После монтирования вызывается первый аргумент, перед размонтированием вызывается возвращаемый им коллбек.
После обновления вызывается коллбек, если данные в массиве зависимостей изменились.

Question 7

Как работает useLayoutEffect?

Answer 7

Синтаксис и поведение хука useLayoutEffect аналогичны useEffect, но хук вызывается синхронно перед отрисовкой DOM на экране, что позволяет внести изменения в DOM перед отображением пользователю по новым computed-значениям.

Question 8

Как работает useInsertionEffect?

Answer 8

Синтаксис и поведение хука useInsertionEffect аналогичны useEffect, но хук вызывается синхронно перед внесением изменений в DOM, что позволяет добавить стили на страницу перед layout-стадией рендеринга браузера.

Question 9

Как работает useMemo и useCallback?

Answer 9

Хуки useMemo и useCallback позволяют создать значение, которое прикрепляется к экземпляру компонента и обновляется только при изменении зависимостей.
Первый аргумент - это коллбек для генерации значения.
Второй аргумент - массив зависимостей.
~~~
const val = useMemo(() => {
return propVal + stateVal
}, [propVal, stateVal])
const cb = useCallback((val) => {
setVal(val + propVal + stateVal)
}, [propVal, stateVal])
~~~

Question 10

Как работает useRef?

Answer 10

Хук useRef создает объект со свойством ref.current, который прикрепляется к экземпляру компонента.
const ref = useRef(initialValue)

Question 11

Как работает useImperativeHandle?

Answer 11

Хук useImperativeHandle позволяет через props.ref передать внутреннее состояние компонента наружу.
Первый аргумент - переданный ref.
Второй аргумент - это коллбек для генерации значения.
Третий аргумент - массив зависимостей.
~~~
useImperativeHandle(ref, () => {
return stateVal
, [stateVal]}
~~~

Question 12

Для чего применяется useId?

Answer 12

Хук useId позволяет сгенерировать уникальное значения компонента, которое потом возможно применить в логике компонента.

Question 13

Для чего применяется useSyncExternalStore?

Answer 13

Хук useSyncExternalStore позволяет подписаться на изменения внешнего источника данных.
const todos = useSyncExternalStore((subscribe) => unsubscribe, getSnapshot, getServerSnapshot?);
Первый аргумент - это функция, принимающая аргументом коллбек от компонента под подписи и возвращающая коллбек для отписки.
Второй аргумент - функция для получения данных.
Третий аргумент - функция для получения данных на сервере.
При вызове коллбека произойдет получение данных и перерисовка компонента.
Применять этот хук удобно для подписи на события браузера.