​useState

Сигнатура: const [state, setState] = useState(initialState);

(названия state и setState могут быть любыми)

- state - актуальное состояние
- setState - метод для обновления состояния state

Обновление состояния с помощью setState приводит к перерендеру компонента (если новое состояние отличается от старого).

Метод setState должен возвращать новое состояние полностью (this.setState у классовых компонентов мог вернуть только обновленные поля, которые автоматически объединялись с объектом текущего состояния).

setState может принимать как просто новое значение, так и функцию. Аргументом в эту функцию будет передано текущее состояние. Все в точности как с функциональным вариантом this.setState у классовых компонентов.

Подробнее про хук состояния: https://yangx.top/react_junior/98

#документация #хуки

​useEffect

Сигнатура: useEffect(didUpdate, values);

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

didUpdate может вернуть функцию для сброса эффекта.

- values - необязательный аргумент, массив переменных, при изменении которых будет вызван эффект. Используется для условного выполнения эффектов.

Важно

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

Подробнее про хук эффекта: https://yangx.top/react_junior/100

#документация #хуки #важно

useContext

Понятие контекста aka глобальных переменных в React мы уже разбирали - https://yangx.top/react_junior/58.

В классовых компонентах, чтобы подписаться на контекст нужно было определить статическое свойство класса contextType и записать туда объект контекста, созданный функцией React.createContext.

Второй вариант - воспользоваться компонентом Context.Consumer, который вместо внутренней разметки принимает рендер-функцию.

Для функциональных же компонентов React предоставляет хук useContext.

Сигнатура: const value = useContext(MyContext);

- MyContext - объект контекста
- value - актуальное значение контекста

Все остальное не меняется: по-прежнему нужен Context.Provider, чтобы предоставить значение контекста во все нижележащие компоненты.

#документация #хуки #контекст

​useReducer

Альтернатива useState для более сложной логики состояния.

Сигнатура: const [state, dispatch] = useReducer(reducer, initialArg, init);

- reducer - функция с сигнатурой (state, action) => newState, которая должна вернуть актуальное состояние
- initialArg - начальное состояние
- init - функция для ленивой инициализации, получает initialArg в качестве аргумента

- dispatch - метод для изменения состояния по модели событий

Вкратце это работает так:

1. Вызываем хук, передаем ему функцию-редьюсер и начальное состояние любым удобным способом (или inialtArg, или результат init).
2. Когда нужно изменить состояние вызываем метод dispatch с аргументом вида { type, payload }. Другими словами, эмитируем событие с типом type и полезной нагрузкой (необязательно).
3. Это событие передается в редьюсер, который должен преобразовать состояние и вернуть уже обновленное.

Подробнее о редьюсерах мы узнаем, когда будем разбираться с Redux. Но в целом это выглядит как более сложный useState, основанный на модели событий.

#документация #хуки #примерыкода

​useMemo

Хук useMemo получает функцию и массив зависимостей и возвращает результат выполнения этой функции. При следующих рендерах этот результат будет пересчитан только если одна из зависимостей изменится.

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

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

Важно

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

#хуки #документация #оптимизация

​useCallback

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

Полученную из useCallback функцию-коллбэк можно передать дочерним компонентам с уверенностью, что она не изменится в следующем рендере.

#оптимизация #документация #хуки

useRef

Сигнатура: const refContainer = useRef(initialValue);

- refContainer - объект со свойством current. refContainer не меняется в течение всего времени жизни компонента, а вот current вполне может мутировать.

Иначе говоря, ref - это неизменяющийся контейнер для изменяющегося значения.

Самое очевидное применение - по аналогии с рефами в классовых компонентах. Там мы использовали для создания ссылки метод React.createRef.

Но этот хук можно использовать для хранения любого мутируемого значения, по аналогии с полями экземпляра класса.

Если мы просто создадим объект с полем current внутри функционального компонента, то при каждом рендере он будет меняться (будет создаваться новый объект). useRef же возвращает один и тот же объект-контейнер.

Важно: Изменение поля current НЕ вызывает повторный рендер компонента.

#документация #хуки #рефы

​useImperativeHandle

Помните метод React.forwardRef?

Он позволял создать компонент, который не присваивал значение атрибута ref себе, а пробрасывал его вглубь своей разметки, например, устанавливал непосредственно на поле ввода.

Другими словами, родительский компонент ставил ref на компонент-обертку, а получал DOM-элемент input, с которым мог взаимодействовать.

Хук useImperativeHandle позволяет настроить, что именно получит родительский компонент, то есть представление для рефа. Например, вместо DOM-элемента он может получить объект с методом focus. Это позволяет инкапсулировать работу с DOM-деревом.

Сигнатура: useImperativeHandle(ref, createHandle, [deps])

- ref - это объект, полученный из хука useRef.
- createHandle - функция, которая должна вернуть представление для рефа (объект с методом focus)

Пример кода - в прикрепленном скриншоте

#документация #хуки #рефы

useLayoutEffect

Вариация useEffect, которая дает шанс вмешаться в рендеринг компонента.

useLayoutEffect запускается СИНХРОННО после всех изменений DOM, ДО ТОГО, как браузер осуществит их отрисовку. Это практически полный аналог классовых методов componentDidMount/componentDidUpdate.

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

#документация #хуки

​useDebugValue

Позволяет отобразить метку для пользовательских хуков в React Dev Tools, что может быть полезно для дебаггинга.

#документация #хуки #отладка

Объяснение хуков

Статья от создателя React Дэна Абрамова (англ.): https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889

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

Основные моменты:

- До появления хуков React позволял удобно разделять UI, но не логику. Хуки решают эту проблему без добавления дополнительных оберток.
- Добавление хуков не раздувает библиотеку. Напротив, их использование позволяет уменьшить размер бандла, так как хуки минифицируются лучше, чем классы.
- Хуки больше соответствуют философии React, чем классы, но от поддержки классов никто не отказывается, ничего переписывать не нужно.
- Никакой магии в хуках нет, они не сложнее, чем Array.push/Array.pop.
- Правила хуков хоть и выглядят несколько странно, но никак не помешают в работе.

#ссылки #хуки

React-хуки - это не магия, а обычные массивы

Статья Rudi Yardley (англ.): https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

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

#ссылки #хуки

Пример запроса данных с помощью хуков

Демо-пример: https://codesandbox.io/s/jvvkoo8pq3?file=/src/index.js

Тут все очень просто:

- Создается состояние data для массива результатов, изначально - пустой массив (хук useState)
- Создается состояние query для текста поискового запроса (хук useState)
- При изменении запроса (setQuery) происходит перерендер компонента - После рендера вызывается эффект, заданный с помощью хука useEffect (у него в зависимостях указана переменная query, значение которой изменилось, поэтому он вызывается)
- Функция-эффект запрашивает данные по апи, а когда приходит ответ, записывает его в состояние data (setData)
- Снова происходит перерендер, но в этот раз эффект не вызывается, так как его единственная зависимость query не изменилась

Пошаговый туториал: https://www.robinwieruch.de/react-hooks-fetch-data

Здесь все подробно разобрано:

- Почему в useEffect нельзя передавать асинхронную функцию
- Зачем нужен массив зависимостей и как он работает
- Зачем используется переменная ignore внутри эффекта (спойлер: чтобы не выводить данные предыдущего запроса, если после него уже отправлен новый)
- Добавление индикатора загрузки
- Обработка ошибок загрузки
- Добавление формы (form) и обработка события onSubmit

Кроме того описан пользовательский хук для извлечения данных useDataApi. Он принимает полный урл запроса, поэтому может работать с любым API. Этот хук инкапсулирует логику запроса данных, индикатора загрузки и обработки ошибок запроса.

Хук useDataApi на гитхабе: https://github.com/the-road-to-learn-react/use-data-api

Наконец в конце рассматривается кейс с заменой отдельных простых состояний (isError, isLoading, data) на единое сложное состояние с использованием хука useReducer. При этом в нужные моменты вызываются нужные события (FETCH_INIT, FETCH_SUCCESS, FETCH_FAILURE) с помощью метода dispatch, а редьюсер обрабатывает их и обновляет состояние.

#ссылки #хуки #примерыкода

​Коллбэк-рефы в функциональных компонентах

Мы уже говорили о коллбэк-рефах здесь https://yangx.top/react_junior/42.

В двух словах: если в атрибут ref элемента передать функцию (вместо объекта, созданного методом React.createRef), она будет вызвана при монтировании этого элемента, а в качестве аргумента получит ссылку на него.

В функциональных компонентах так тоже можно делать, с одним условием - функция (коллбэк-реф) должна быть создана с помощью хука useCallback. В ином случае она будет меняться при каждом рендере.

#рефы #примерыкода #документация #хуки

​Функции в списке зависимостей

Если мы указываем для хука список зависимостей (useEffect, useLayoutEffect, useMemo, useCallback, useImperativeHandle), в него должны войти все использованные значения, которые задействованы в потоке данных React, включая пропсы, состояние и их производные.

А что если одно из этих значений функция - внешняя по отношению к вызову хука? Нужно ли ее указывать в зависимостях к хуку useEffect. (см. прикрепленный скриншот)

С одной стороны - да, ведь она использует состояние count. Если count изменится, эффект должен быть вызван заново. Можно, конечно, указать в списке зависимостей сам count, но ведь функция foo может использовать еще какие-нибудь данные, можно что-то упустить.

С другой стороны, функция foo (ее идентичность) будет меняться при каждом рендере. Это создаст замкнутый круг:

- изменился count при клике на кнопку
- произошел перерендер
- функция foo создалась заново
- поэтому вызван эффект
- вызов foo изменяет состояние fooCount
- происходит перерендер
- функция foo создалась заново
- поэтому вызван эффект... 🤦‍♂️ (хотя не должен быть вызван, ведь count-то не изменился)

Варианты решения

👉 объявить foo снаружи компонента (при этом она не сможет ссылаться на пропсы и состояние)
👉 переместить foo внутрь эффекта (тогда она не будет пересоздаваться, и в зависимостях ее указывать не нужно)
👉 убедиться, что foo не использует никаких данных компонента, которые могут измениться при перерендере (и тогда не указывать ее в зависимостях)
👉 создать foo с использованием хука useCallback и указанием зависимостей (тогда ее идентичность не будет меняться между рендерами)

https://codepen.io/furrycat/pen/MWmKKwZ?editors=0011

#ошибки #примерыкода #хуки

Инициализация состояния

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

#хуки #документация #важно

Тестирование в React

Открываем новый большой раздел - тестирование React-приложений.

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

Так как речь идет о фронтенде и интерфейсах, тестировать придется не только логику, но и верстку. И экосистема React уже имеет готовые решения для этого.

Мы будем разбираться, как тестировать React-приложения с использованием библиотек Jest (исполнитель тестов) и React Testing Library (набор вспомогательных функций).

#документация #тестирование

Jest

Jest - это тестовый фреймворк для JavaScript-кода. Create React App использует Jest из коробки.

Возможности Jest

👉 подмена области рендеринга с помощью jsdom
тесты будут выполняться вне настоящего браузера, следовательно его поведение нужно имитировать.

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

👉 фиктивные модули
позволяет заменить сторонние модули, от которых зависит тестируемый компонент, если они неправильно работают в среде тестирования или вообще не нужны для тестирования

👉 фиктивные таймеры
позволяют контролировать (например, ускорять) функции, связанные со временем

#документация #тестирование