Заметки про React

2021-11-24 09:01:23 Причины вызова useEffect перед отрисовкой

Владимир Клепов разбирается с причинами запуска useEffect перед этапом отрисовки браузера. Причиной такого поведения может стать изменение стейта в useLayoutEffect.

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

Изменение стейта в useLayoutEffect провоцирует новый ререндер. Перед новым ререндером происходит вызов оставшихся / ожидающих вызова useEffect. Дальше происходит стандартный флоу: обновление, вызов useLayoutEffect, отрисовка и вызов useEffect.

https://thoughtspile.github.io/2021/11/15/unintentional-layout-effect/ Открыть/Комментировать

2021-11-22 10:30:08 Гайд по разработке React приложений

Bulletproof React – репозиторий-пример, в котором собраны различные библиотеки и инструменты, которые покрывают большинство аспектов разработки приложения на React. В репозитории есть статьи про настройку проекта, тестирование, стейт менеджеры, перфоманс и т.д.

Автор проекта не предлагает использовать репозиторий как шаблон для проектов. Цель проекта показать, как можно решать основные проблемы, возникающие в разработке приложения на React.

https://github.com/alan2207/bulletproof-react Открыть/Комментировать

2021-11-17 12:05:06 Техническое погружение в ​​react-three-fiber

Коди Беннетт пишет о технической реализации кастомного React рендерера react-three-fiber. 

В статье описан принцип работы кастомного рендерера, а также как реализован HostConfig реконсайлера для Three.js. 

Перед прочтением рекомендую ознакомиться с заметкой про устройство кастомных React рендереров – https://t.me/ru_react_notes/29.

https://codyb.co/articles/a-technical-breakdown-of-react-three-fiber Открыть/Комментировать

2021-11-16 10:40:01 React 18 перешел в статус beta

В период с версии alpha были добавлены следующие фичи в будущий релиз:

- useSyncExternalStore
- useId (обзор)
- useInsertionEffect

По сообщению Andrew Clark, в React 18 больше не будет новых API. Оставшаяся работа заключается в разработке документации и различных улучшениях, например, сообщения об ошибках.

https://github.com/reactwg/react-18/discussions/112 Открыть/Комментировать

2021-11-15 13:30:25 Избегаем состояния гонки в React

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

Состояние гонки в приложениях React можно воспроизвести на примере с получением данных в useEffect. Например, при изменении зависимостей deps у useEffect запрос fetch начнет выполняться и при его успехе произойдет изменение стейта. Однако, если не отменить старый запрос fetch, то может произойти коллизия: два события пытаются изменить общие данные. 

Также, если компонент будет размонтирован и после выполнения запроса fetch произойдет изменение стейта, то будет ошибка React: Warning: Can't perform a React state update on an unmounted component.

Чтобы избежать подобных ситуаций, необходимо отменять запрос fetch, если он больше не нужен. Один из вариантов – использовать guard переменную, которая будет определять актуальность запроса. Другой вариант – использовать AbortController в fetch.

https://academind.com/tutorials/useeffect-abort-http-requests Открыть/Комментировать

2021-11-12 11:10:02 Предотвращаем рендеры компонента с react-freeze

Ребята из Software Mansion представили библиотеку react-freeze.
React-freeze позволяет “замораживать” рендер компонента, используя механизм Suspense, представленный в React 17. Основная цель библиотеки заключается в предотвращении лишних рендеров. При “заморозке” компонент не размонтируется, внутреннее состояние компонента и его дерево сохраняются, а сам компонент заменяется на плейсхолдер.

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

Библиотека использует механизм работы Suspense. Компонент оборачивается в Suspense и обертку Suspender. Когда нужно “заморозить” компонент, то в Suspender выбрасывается исключение Promise , который перехватывает Suspense. При получении промиса-исключения, Suspense ставит компонент в режим ожидания, предотвращая лишний рендер и изменение состояния.

Github https://github.com/software-mansion-labs/react-freeze
Статья https://blog.swmansion.com/experimenting-with-react-freeze-71da578e2fa6 Открыть/Комментировать

2021-11-10 11:30:43 useEffect – основные проблемы и способы их решения

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

Одна из возможных проблем – хук useEffect вызывается при каждом рендере компонента. Если в хуке устанавливается состояние, то это может привести к бесконечному ререндеру приложения. Возможная причина такого поведения useEffect связана либо с отсутствием аргумента зависимостей, либо зависимость меняется в каждом рендере.

Если в качестве зависимости у хука useEffect используется объект, объявленный внутри компонента, то ссылка на этот объект меняется в каждом рендере. Поэтому нужно использовать ​​useMemo для объявления объектов внутри компонента, если они в дальнейшем будут передаваться в useEffect.

https://www.freecodecamp.org/news/most-common-react-useeffect-problems-and-how-to-fix-them/ Открыть/Комментировать

2021-11-09 12:35:03 Конференция React Conf 2021

В этом году конференция Reacf Conf пройдет онлайн 8 декабря, регистрация бесплатная.

Будет 20 спикеров, среди которых есть ребята из команды React, например, Andrew Clark, один из разработчиков хуков, Suspense и конкурентного режима. Также есть ребята из Microsoft, Paypal, Netflix.

Темы докладов пока неизвестны, но думаю, одна из тем будет про новый React 18.

https://conf.reactjs.org/ Открыть/Комментировать