Что не так с "Голыми промисами" и чем их заменить

Статья (англ.): https://www.freecodecamp.org/news/naked-promises-are-not-safe-for-work/

Эта тема довольно часто поднимается в статьях: промисы в чистом виде не очень удобны.

Во-первых, их нельзя отменить (вообще можно, но это требует некоторого объема дополнительного кода).

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

Кроме того в некоторых случаях при выполнении промиса требуется проверить, актуален ли контекст его выполнения (например, не размонтирован ли к этому времени компонент React).

В качестве решения проблемы автор предлагает просто обернуть промис, инкапсулировав всю дополнительную логику, и предлагает сразу несколько готовых пакетов (react-async, react-use, react-hooks-async).

#react #promise #patterns

14 лучших каруселей для React-проектов

Статья (англ.): https://medium.com/@vdas53073/14-top-react-carousel-components-2022-%EF%B8%8F-d89b4a84f249

14 готовых компонентов для реализации карусели на React. Кроме старых добрых Swiper, Slick, Owl Carousel есть еще много хороших решений на любой вкус.

#tools #library #react #interface

Создание модальных окон в React: от основ до продвинутого уровня

Статья (англ.): https://medium.com/tinyso/how-to-create-a-modal-component-in-react-from-basic-to-advanced-a3357a2a716a

Статья пошагово описывает процесс создания React-компонента модального окна: от разметки до поведения.

Для управления видимостью используется проп show. Кроме того компонент отслеживает свое закрытие и вызывает функцию onClose.

Обрабатывается закрытие при клике на кнопку Close, подложку, а также по нажатию клавиши Escape.

Текст заголовка и содержимое модального окна передаются динамически через пропсы (`title` и `children`).

Появление и исчезновение модального окна сопровождается анимацией с использованием компонента CSSTransition из пакета react-transition-group (в этот пакет вынесена вся transition-функциональность React).

И наконец, модальное окно рендерится вне контейнера с помощью портала (`ReactDOM.createPortal`).

#react #interface

​Roadmap для React-разработчика

https://roadmap.sh/react

От базовых концепций - компонентов и хуков - до тестирования и фреймворков. Полезная штука для представления современной React-экосистемы.

#react #roadmap

12 хуков React, которые должен знать каждый разработчик

Статья (рус.): https://nuancesprog.ru/p/16589/

В статье есть реально классные библиотеки, которые стоит взять на заметку.

1. react-swipeable - для обработки свайпов
2. use-resize-observer - позволяет изменять размеры элемента и измерять их
3. formik - для всей рутины с формами (валидация, посещенные поля и т.д.)
4. use-debounce - позволяет отслеживать какие-то изменения с задержкой для увеличения производительности
5. use-isomorphic-layout-effect - нужен для SSR, так как на сервере нельзя использовать хук useLayoutEffect
6. swr - библиотека для получения данных (stale-while-revalidate)
7. react-hotkeys-hook - для работы с горячими клавишами
8. @use-gesture/react - обработка жестов и различных событий
9. react-script-hook - для динамической загрузки внешних скриптов
10. react-scroll-parallax - для реализации параллакса при скроллинге
11. react-storage-hooks - для синхронизации состояния приложения с хранилищем (`localStorage`/`sessionStorage`)
12. @chakra-ui/color-mode - поддержка светлого и темного режимов

#react #hooks #библиотеки

React Reconciliation: как работает и зачем нам это знать

Статья (англ.): https://www.developerway.com/posts/reconciliation-in-react
Перевод: https://gist.github.com/zagazat/db926ec7ab69061934246a55b64913c3

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

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

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

В качестве решения проблемы рассматриваются два подхода: с позицией элемента в массиве и с атрибутом key.

#react

Валидация форм с react-hook-form в React-приложениях

Видео (рус.): https://youtu.be/Jxfun6Jnt5Q

Быстрое и понятное введение в работу с библиотекой react-hook-form. Достаточно подробно описано, как настроить валидацию для формы с неконтролируемыми полями.

#видео #react #forms

React 19 будет компилируемым

Статья (англ.): https://reacttraining.com/blog/react-19-will-be-compiled

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

А в статье автор разбирается, что же это значит и насколько это нововведение изменит разработку.

Зачем мы мемоизируем

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

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

В статье приводится простой пример этого процесса.

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

Чуть более компилируемый

Затем автор рассуждает немного о "компилируемости" React. Он приходит к заключению, что нет двух отдельных положений - либо компилируется, либо не компилируется. Компилируемость - это шкала, на которой одни инструменты (Svelte) более компилируемы, а другие менее.

Идея в том, что появление нового компилятора не должно нас пугать.

#ссылки

Схема обновления дерева компонентов:

https://youtu.be/kNypR7QKixE?si=AZcFKvHjLSO_L3y5

#react #fiber #подкапотом

Коммит изменений

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

На данный момент мы имеем полностью построенное workInProgress-дерево: для каждого Fiber-узла в нем создан соответствующий DOM-элемент и проставлены все необходимые флаги.

Тут работает функция commitMutationEffects(root, finishedWork, lanes), где finishedWork - это корень (HostRoot) нового дерева.

Под капотом там довольно много всего, но основная идея - пошаговое внесение изменений:

⁃ сначала удаляется то, что нужно удалить
⁃ потом вставляется то, что нужно вставить

Возможно, позже вернусь к этому.

https://jser.dev/2023-07-14-initial-mount/#how-react-does-initial-mount-first-time-render- тут в конце статьи есть прекрасная презентация, визуально показывающая последовательность действий при первом рендеринге

#react #подкапотом #fiber