Легковесные альтернативы Redux

Статья (англ.): https://blog.openreplay.com/lightweight-alternatives-to-redux

Автор статьи рассказывает, какие инструменты можно использовать для управления глобальным состоянием приложения вместо Redux.

1. Хуки React

Простейший вариант - использовать встроенные хуки. С помощью useReducer мы выносим состояние приложения в отдельный объект и можем удобно им управлять, а с помощью контекста доставляем этот объект до всех заинтересованных компонентов. Пример.

2. Zustand

Zustand использует те же flux-принципы, что и Redux. Мы создаем хранилище с помощью функции create и получаем из нее хук useStore, который можно использовать в компонентах.

3. Jotai

Разработан той же командой, что и Zustand, но использует другой подход - атомарный (atomic). Каждая часть данных оформляется в виде атома с помощью функции atom. Для работы с атомами есть хук useAtom, который работает так же, как useState.

4. Valtio

Подход Valtio базируется на использовании прокси. Мы передаем объект в функцию proxy и дальше можем его мутировать - прокси отслеживает все изменения.

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

#redux #react #statemanagement #library

​React World

Развлекалочка на React: https://sfatihk.github.io/react-world/
Скроль страницу и совершай небольшое путешествие с героями любимых фильмов.

А потом можно залезть в исходники и посмотреть, как все это работает: https://github.com/sfatihk/react-world

#react

React 18

Перевод оригинальной статьи на Хабре: https://habr.com/ru/post/659537/

Обзор новинок последнего релиза - а их немало.

Конкурентный рендеринг

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

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

Автоматическое пакетирование

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

Переходы (transitions)

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

Новая функция startTransition (или хук useTransition) позволяет явно указать "не срочные" обновления. Их выполнение может быть прервано, если в процессе поступят какие-то "срочные" обновления.

Suspense

Расширились возможности React.Suspense. Раньше он только позволял лениво загружать код с помощью React.lazy и не поддерживался при серверном рендеринге. Теперь работает и на сервере тоже и хорошо сочетается с API переходов.

Новые API рендеринга

Новые методы для рендеринга - createRoot и hydrateRoot`на клиенте, `renderToPipeableStream и renderToReadableStream на сервере.

Двойное монтирование компонентов

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

Новые хуки

- useId - генерация уникальных идентификаторов
- useTransition - позволяет пометить обновления как "переходные" (см. выше)
- useDeferredValue - откладывает не срочный перерендеринг
- useSyncExternalStore - хук для библиотек, работающих с внешним состоянием
- useInsertionEffect - хук для библиотек CSS-in-JS для инъекции стилей, срабатывает до layout effect.

#react

Шахматы на React и TypeScript С НУЛЯ. Практикуем ООП

Видео (рус.): https://www.youtube.com/watch?v=mUvYGUYMvKo

Часовое (1 час 12 минут) руководство по созданию шахмат на React. Все последовательно и очень понятно, даже если вы (как я) не особенно близко знакомы с TypeScript. Если не планируете повторять, можно смотреть на скорости 1.5.

Логика игры максимально отделена от представления, поэтому вместо React ее можно реализовать на чем угодно.

Модели

👉 Класс Board (игровая доска) создает игровое поле и расставляет фигуры.
👉 Класс Cell (клетка доски) имеет цвет, координаты и знает, какая фигура на ней находится
👉 Класс Figure (фигура) и 6 дочерних классов для отдельных фигур хранят логику передвижения фигур по доске.

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

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

Мое повторение за автором: https://codesandbox.io/s/checkmate-react-ts-o8ob16?file=/src/models/Player.ts

#react #video #typescript

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

Статья (англ.): 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