— нововведение в React 16.8, которое позволяет

Хуки

использовать состояние и другие возможности React

без написания классов.

📌 Хук состояния
Рассмотрим пример, в котором рендерится счётчик. Если вы нажмёте
на кнопку, значение счётчика будет инкрементировано.
import React, { useState } from 'react';
function Example() {
// Объявляем новую переменную состояния "count"
const [count, setCount] = useState(0);
return (
<div>
<p>Вы нажали {count} раз</p>
<button onClick={() => setCount(count + 1)}>
Нажми на меня
</button>
</div>
);
}

Единственный аргумент useState — это начальное состояние. 

Объявление нескольких переменных состояния

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

Что делает вызов useState? Он объявляет «переменную состояния».

Мы называли переменную count, но могли дать ей любое имя, хоть банан.
Таким образом мы можем «сохранить» некоторые значения между
вызовами функции. useState это новый способ использовать те же
возможности, что даёт this.state в классах.

Вызов useState вернёт пару значений: текущее состояние и функцию,

обновляющую состояние. Поэтому мы пишем const [count,
setCount] = useState()
⚡️Хук эффекта
С помощью хука эффекта useEffect вы можете выполнять побочные
эффекты из функционального компонента. Он выполняет ту же роль, что
и componentDidMount, componentDidUpdate и componentWillUnmount в React-
классах.

По умолчанию, React запускает эффекты после каждого

рендера, включая первый рендер.

Существует два распространённых вида побочных эффектов в компонентах

React: компоненты, которые требуют и не требуют сброса. Давайте
рассмотрим оба примера более детально.

Эффекты без сброса

Иногда мы хотим выполнить дополнительный код после того, как React
обновил DOM. Сетевые запросы, изменения DOM вручную, логирование —
всё это примеры эффектов, которые не требуют сброса.

Что же делает useEffect? Используя этот хук, вы говорите React сделать

что-то после рендера. React запомнит функцию (то есть «эффект»), которую
вы передали и вызовет её после того, как внесёт все изменения в DOM.

Выполняется ли useEffect после каждого рендера? Разумеется!

По умолчанию он будет выполняться после каждого рендера и обновления.

Эффекты со сбросом
Зачем мы вернули функцию из нашего эффекта? Это необязательный
механизм сброса эффектов. Каждый эффект может возвратить функцию,
которая сбросит его. Это даёт нам возможность объединить вместе логику
оформления и отмены подписки. Они, всё-таки, часть одного и того же
эффекта!

Когда именно React будет сбрасывать эффект? React будет сбрасывать

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

Вызывайте хуки только из React-функций

Не вызывайте хуки из обычных функций JavaScript. Вместо этого можно:
 ✅ Вызывать хуки из функционального компонента React.
 ✅ Вызывать хуки из пользовательского хука (мы научимся делать
это на следующей странице).

Создание
пользовательских
хуков
Создание пользовательских хуков позволяет вам перенести логику
компонентов в функции, которые можно повторно использовать.

Пользовательский хук — это JavaScript-функция, имя которой

начинается с «use», и которая может вызывать другие хуки. 
 Использование пользовательского
хука
Вначале нашей целью было удалить дублированную логику
из компонентов FriendStatus и FriendListItem. Они оба хотят знать, есть ли друг
в сети.
Теперь, когда мы извлекли эту логику в хук useFriendStatus, мы можем его
использовать:
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Загрузка...';
}
return isOnline ? 'В сети' : 'Не в сети';
}
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}

useContext
Принимает объект контекста (значение, возвращённое
из React.createContext) и возвращает текущее значение контекста для этого
контекста.

Запомните, аргумент для useContext должен быть непосредственно сам

объект контекста:
 Правильно: useContext(MyContext)
 Неправильно: useContext(MyContext.Consumer)
 Неправильно: useContext(MyContext.Provider)

useReducer
const [state, dispatch] = useReducer(reducer, initialArg, init);
Альтернатива для useState. Принимает редюсер типа (state, action) =>
newState и возвращает текущее состояние в паре с методом dispatch. (Если
вы знакомы с Redux, вы уже знаете, как это работает.)

useCallback
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);

Возвращает мемоизированный колбэк.
Передайте встроенный колбэк и массив зависимостей.
Хук useCallback вернёт мемоизированную версию колбэка, который
изменяется только, если изменяются значения одной из зависимостей. Это
полезно при передаче колбэков оптимизированным дочерним
компонентам, которые полагаются на равенство ссылок для
предотвращения ненужных рендеров

useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Возвращает мемоизированное значение.
Передайте «создающую» функцию и массив зависимостей. useMemo будет
повторно вычислять мемоизированное значение только тогда, когда
значение какой-либо из зависимостей изменилось.

useCallback и useMemo предназначены для оптимизации. useCallback получает на

функцию и массив аргументов, и возвращает одну и туже функцию, до тех пор, пока
аргументы не изменились. useMemo отличается тем, что он возвращает не саму
функцию, а результат её выполнения. По большому счету они являются
взаимозаменямыми.
Таким образом, useMemo используется для сохранения результатов тяжёлых
вычислений, например обработка массива.

useRef
const refContainer = useRef(initialValue);
useRef возвращаетизменяемый ref-объект, свойство .current которого
инициализируется переданным аргументом (initialValue). Возвращённый
объект будет сохраняться в течение всего времени жизни компонента.
useImperativeHandle
useImperativeHandle(ref, createHandle, [deps])
useImperativeHandle настраивает
значение экземпляра, которое
предоставляется родительским компонентам при использовании ref. Как
всегда, в большинстве случаев следует избегать императивного кода,
использующего ссылки. useImperativeHandle должен использоваться
с forwardRef:

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

useDebugValue
useDebugValue(value)
useDebugValue может
использоваться для отображения метки для
пользовательских хуков в React DevTools.

React.memo —это компонент высшего порядка. Он похож на React.PureComponent,

но предназначен для функциональных компонентов.
Если ваш функциональный компонент всегда рендерит одинаковый
результат для одних и тех же пропсов, вы можете обернуть его
в вызов React.memo для повышения производительности в некоторых случаях,
мемоизируя результат. Это значит, что React будет использовать результат
последнего рендера, избегая повторного рендеринга.