A programmer: JavaScript #27. Hooks in React

Поскольку, грубо говоря, в JavaScript всё есть объект, то и компоненты React тоже вполне логично интерпретируются как объекты. А у объектов, как известно, есть состояние (state) и есть поведение. Состояние хранится в самом объекте, и его можно в нем же менять через this.setState. Но в последнее время разработчики React стараются отходить от такой практики и использовать компоненты как "функциональные компоненты", или просто функции. А функции не имеют состояния (stateless). Но состояние - вещь необходимая, и возникшую проблему надо решать - для этого и придумали хуки (hooks). Хук - это функция, которая меняет состояние, которое хранится в локальной переменной.

Классический пример - использование хука useState для счетчика (сначала его надо импортировать и библиотеки 'react'):

const [count, setCount] = useState(0);

Здесь происходит "деструктуризация массива" - объявляются и переменная состояния (count), и собственно хук (setCount). То есть запись эквивалентна следующей:

var countStateVariable = useState(0);

var count = countStateVariable[0]; // Объявление переменной состояния

count = 0; // Присваивание начального значения

var setCount = сountStateVariable[1]; // Объявление хука

Теперь к ним можно обращаться в рендере:

button onClick={() => setCount(count + 1)}

Другой классический пример – хук useEffect. Он определяет действия, которые должны быть выполнены после каждого рендера – то есть заменяет собой встроенные методы, которые связанны с жизненным циклом компонента (componentDidMount, componentDidUpdate и др.). Поскольку перерисовка компонента обычно связана с изменением состояния (за которое обычно отвечает useState), то часто оба эти хука используются вместе:

const [count, setCount] = useState(0);

useEffect(() => { document.title = `Вы нажали ${count} раз` });

В данном случае document.title будет перерисовываться при каждом изменении состояния.

Существуют и другие хуки, а также можно написать собственные.

Информация взята отсюда, отсюда, отсюда.