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

До того, как вышла версия React под номером 16.8, разработчики могли обрабатывать состояния и работать с другими функциями React только с помощью компонентов-классов. Но версия 16.8 ввела новый шаблон под названием «хуки». 

С помощью хуков мы можем работать с состоянием и прочими функциями React внутри компонента-функции. Таким образом, разработчики могут работать в React по принципам функционального программирования.

В этой статье мы познакомимся с основами хуков в React. За написанием этой статьи стоит один мотив: заставить новичков прийти к мысли о том, что «хуки в React – это легко как в изучение, так и в создании и использовании». И это действительно так, если вы знаете их основательно.

Прежде чем вы познакомитесь с хуками…

Прежде чем рассуждать о хуках, сначала поговрим о самых простых (иначе говоря, избитых) функциях JavaScript.

Функции в JavaScript – это логика кода, которая может использоваться многократно для выполнения повторяющихся задач. Функции можно компоновать. Это значит, что вы можете вызвать функцию внутри другой функции и использовать ее результат.

Функция someFunction() (на изображении ниже) состоит из функций a() и b(). А функция b() использует функцию c().

Компонуемость функций

Если запишем это в виде кода, то это будет выглядеть следующим образом:

function a() {
    // some code { // некоторый код }
}

function c() {
    // some code
}

function b() {
    // some code
    
    c();
    
    // some code
}

function someFunction() {
    // some code
    
a();
    b();
    
    // some code
}

Ни для кого не секрет, что компоненты-функции в React – это старые добрые функции JavaScript! А значит, если функции JavaScript можно компоновать, то и с компонентами React можно делать тоже самое. Получается, что мы можем использовать (компоновать) один или несколько компонентов в другом компоненте, как показано на рисунке ниже:

Компонуемость компонентов

Компоненты с состоянием и без состояния

Компоненты в React могут фиксировать состояние, а могут не фиксировать его:

• Компонент с состоянием объявляет в нем локальное состояние и управляет им.
• Компонент без состояния – это чистая функция, у которой нет локального состояния и побочных эффектов, которыми нужно управлять. 

Чистая функция – это функция, у которой нет побочных эффектов. Это значит, что такая функция всегда возвращает один и тот же результат для одного и того же набора входных данных.

Если мы исключим из компонента-функции логику, связанную с отслеживанием состояния и побочными эффектами, то получим компонент без состояния. Эта логика, в свою очередь, может быть повторно использована в каком-то другом месте в приложении. Именно поэтому вполне логичным будет отделить ее от компонента настолько, насколько это возможно.

Компонент с состоянием – компонент, у которого есть логика отслеживания состояния

Хуки React и логика отслеживания состояния

Отделить логику отслеживания состояния и побочные эффекты от компонента-функции можно с помощью хуков React. Хуки – это функции JavaScript, которые управляют тем, как ведут себя состояния, и побочными эффектами, отделяя их от компонента. 

Так что, мы можем отделить всю логику отслеживания состояний, поместить ее в хуки и использовать (компоновать их, так как хуки – это те же функции) в компонентах. 

Изолирование логики отслеживания состояний в хуках

Вопрос в том, что же такое логика отслеживания состояния? Это может быть что-то, что нужно объявлять локально или что требует управления переменной состояния.  

Например, логика локальной переменной, отвечающая за извлечение и управление данными, фиксирует состояние. Кроме того, логику извлечения данных можно использовать повторно в других компонентах.

Так что же такое хуки React на самом деле?

Итак, как же записать определение хуков React простыми словами? Теперь, когда вы выяснили, что такое функции, компонуемость, компоненты, состояния и побочные эффекты, мы можем перейти к определению хуков React:

Хуки React – это простые функции JavaScript, которые мы можем использовать для того, чтобы отделить от компонента-функции ту часть, которую можно использовать многократно. Хуки могут фиксировать состояния и управлять побочными эффектами.

У React есть целый набор стандартных встроенных хуков:

• useState: используется для того, чтобы управлять состоянием. Возвращает значение, фиксирующее состояние, и функцию обновления, которая его обновляет.
• useEffect: используется для того, чтобы управлять побочными эффектами, например, вызовами API, подписками, таймерами, изменениями данных и т.д.
• useContext: используется для того, чтобы возвращать текущее значение окружения.
• useReducer: альтернативный вариант useState, который помогает в случае непростого управления состоянием. 
• useCallback: возвращает сохраненную версию обратного вызова для того, чтобы дочерний компонент не выполнял повторную визуализацию попусту. 
• useMemo: возвращает сохраненное значение, которое помогает оптимизировать производительность. 
• useRef: возвращает объект ref и свойство .current. Объект ref – это изменяемый объект. Как правило, он применяется для того, чтобы получить прямой доступ к дочернему элементу. 
• useLayoutEffect: запускается после того, как в DOM будут внесены все изменения. Так как useLayoutEffect запускается синхронно, лучше всего как можно чаще использовать useEffect.
• useDebugValue: помогает добавить метку к пользовательским хукам в React DevTools.

Обратите внимание, что каждое наименование хука начинается со слова use. Да-да, это обычная практика, которая используется для быстрого поиска хуков в кодовой базе React.

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

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