Производительные React приложения с помощью Context

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

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

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

https://www.developerway.com/posts/how-to-write-performant-react-apps-with-context

Использование глобальной мемоизации в React

Когда приложение становится медленным, мы используем useMemo для избежания ненужных ререндеров компонента. Но useMemo подходит не всегда и иногда его использование добавляет больше бесполезной работы.

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

https://thoughtspile.github.io/2022/02/09/react-global-memo/

Повышаем производительность приложения используя ​​React Profiler

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

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

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

https://indepth.dev/posts/1497/react-profiler

Популярный стек для React

Экосистема React большая, постоянно появляются новые библиотеки и инструменты. Йоханнес Кеттманн собрал наиболее популярный стек для React. В качестве способа подсчета популярности является количество скачиваний библиотеки в npm.

Самые популярные библиотеки React:
- Next.js – фреймворк с серверным рендерингом из коробки.
- Redux – библиотека для управления стейта.
- react-query или Apollo – для получения данных.
- react-hook-form или Formik – управление формами.


Популярные библиотеки для написания тестов:
- Jest – для запуска тестов.
- React Testing Library – написание интеграционных тестов.
- Cypress – написание E2E тестов.
- Storybook – для документации и тестирования компонентов.

#beginner

https://profy.dev/article/react-tech-stack

CSS анимации используя React

CSS анимации предоставляют декларативное API для анимации DOM элементов. Нужно всего лишь указать параметры анимации и определить keyframes, описывающие поведение в заданных точках. Тем не менее, в приложениях, где используется много анимаций, будет сложно поддерживать большое количество анимаций, написанных в CSS.

В техническом блоге BBC рассказали про декларативный подход к использованию CSS анимаций в React через компоненты-анимации. Такой подход позволяет через композицию объединить несколько анимаций.

<FadeIn duration={2} delay={0}>
  <Zoom from={1} to={2} duration={2} delay={2}>
    <FadeOut duration={2} delay={4}>
      <RedBox />
    </FadeOut>
  </Zoom>
</FadeIn>

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

https://medium.com/bbc-design-engineering/css-animations-as-a-dom-based-animations-framework-d6ef582c033a

Создаем свой React с рендером и useState за 30 минут

Создать свой React не так сложно, как вам может показаться. По крайней мере минимальную версию, которая будет только рендерить JSX. Основная работа заключается в компиляции JSX и рендере элементов.

В React используется синтаксис JSX. Для компиляции JSX в JavaScript можно выбрать TypeScript или babel. При компиляции выражение <h1>React, what are you?</h1> превратится в React.createElement("h1", null, "React, what are you?").

Функция createElement принимает три параметра: тег, атрибуты и содержимое. В качестве содержимого могут быть другие вложенные элементы. Функция createElement возвращает объект React элемента, рендер которого происходит в ReactDOM.render. ReactDOM.render рекурсивно рендерит всех наследников переданного элемента и добавляет атрибуты к DOM элементу.

https://habr.com/ru/post/652487/

Griffel – новый CSS-in-JS от Microsoft

Microsoft презентовал свою CSS-in-JS библиотеку для стилизации React приложений. Основные фичи:
- возможность компиляции CSS во время сборки и в runtime
- типизация стилей через csstype
- использование Atomic CSS для переиспользования стилей и предотвращения проблем со специфичностью CSS.

Пример использования:

import { makeStyles } from '@griffel/react';

const useClasses = makeStyles({
  button: { color: 'red' },
  icon: { paddingLeft: '5px' },
});

function Component() {
  const classes = useClasses();

  return (
    <div>
      <button className={classes.button} />
      <span className={classes.icon} />
    </div>
  );
}

При написании стилей поддерживаются псевдоклассы, псевдоэлементы и at-правила. Также в Griffel есть API для создания глобальных стилей, которые не привязаны к компоненту – makeStaticStyles.

https://github.com/microsoft/griffel

Очень интересно наблюдать, как появляются новые CSS-in-JS библиотеки, особенно от таких крупных компаний. Еще в 2019 году Facebook рассказал о своей CSS-in-JS библиотеке – Stylex. Правда она еще до сих пор не появилась на гитхабе.

Релиз версии Next.js 12.1

Произошел релиз Next.js 12.1 с одной из самых востребованных фич – Incremental Static Regeneration (ISR). ISR позволяет создавать и обновлять статические страницы сайта после сборки проекта. Обновление статической страницы возможно двумя способами. Обновить статическую страницу можно автоматически, спустя заданное количество секунд после последней генерации страницы:

export async function getStaticProps() {
  return {
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  }
}

Также возможно ручное обновление страницы. Например, такое пригодится для интернет-магазинов, при изменении цены товара на странице:

// pages/api/revalidate.js
export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  try {
    await res.unstable_revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}

Другие изменения в новой версии:
- Улучшена поддержка SWC. Некоторые Babel плагины были портированы на Rust. Включена поддержка styled-components, relay.
- Автоматическая конфигурация Jest.
- Более быстрая минификация, используя SWC. В 7 раз быстрее чем Terser.
- Оптимизация изображений. API по работе с изображениями поддерживает паттерн ISR.
- Работа в сторону поддержки React 18, серверных компонентов и потокового SSR. Была обновлена документация для тех, кто хочет попробовать эти фичи.

https://nextjs.org/blog/next-12-1

Доступен React 18 RC

Версия React 18 стала доступна в качестве релиз-кандидата. Чтобы установить, нужно использовать @rc тег:

npm install react@rc react-dom@rc
// или
yarn add react@rc react-dom@rc

В React 18 появится новое API для библиотек. Для поддержки конкурентного рендеринга сторонними библиотеками было добавлено следующее API:
- useId – хук для генерации уникального id на клиенте и сервере, поддерживающего гидратацию. Подробнее.
- useSyncExternalStore – хук для работы с внешними хранилищами, позволяющий производить параллельное чтение из источника и синхронную запись. Подробнее.
- useInsertionEffect – хук для вставки стилей в процессе рендера, предназначен для CSS-in-JS библиотек. Подробнее.

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

Для поддержки такого UI сценария React добавляет новую проверку в development режиме в strict mode. Эта новая проверка будет автоматически демонтировать и повторно монтировать каждый компонент всякий раз, когда компонент монтируется в первый раз, восстанавливая предыдущее состояние при втором монтировании.

Также в React 18 прекращается поддержка браузера Internet Explorer.

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

История React

На канале uidotdev вышло видео об истории React, о том как он возник в 2013 году и стал тем, чем является сейчас.

https://www.youtube.com/watch?v=Wm_xI7KntDs

Структура проекта React от Джошуа Комо

В React нет единого подхода к организации структуры проекта, поэтому у многих начинающих разработчиков возникает вопрос, как правильно? Один из советов Дэна Абрамова – “перемещайте файлы, пока не почувствуете, что это правильно”.

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

https://www.joshwcomeau.com/react/file-structure/

Как проектировалось мидлвар подписки для Redux Toolkit

В Redux Toolkit 1.8 вышло новое API createListenerMiddleware для подписки на отправку экшенов или изменения стейта. Это API должно стать более простой альтернативой использования вместо более популярных saga или observable.

// Create the middleware instance and methods
const listenerMiddleware = createListenerMiddleware()

// Add one or more listener entries that look for specific actions.
// They may contain any sync or async logic, similar to thunks.
listenerMiddleware.startListening({
  actionCreator: todoAdded,
  effect: async (action, listenerApi) => {
    // Run whatever additional side-effect-y logic you want here
    console.log('Todo added: ', action.payload.text)

    // Can cancel other running instances
    listenerApi.cancelActiveListeners()

    // Run async logic
    const data = await fetchData()

    // Pause until action dispatched or state changed
    if (await listenerApi.condition(matchSomeAction)) {
      // Use the listener API methods to dispatch, get state,
      // unsubscribe the listener, start child tasks, and more
      listenerApi.dispatch(todoAdded('Buy pet food'))
      listenerApi.unsubscribe()
    }
  },
})

В своем блоге один из разработчиков Redux Toolkit, Марк Эриксон, рассказал об истории данного API и этапах его разработки. Разработка данной фичи была начата 2.5 года назад и потребовала много итераций, чтобы определить, какие варианты использования он должен охватывать, как должен выглядеть общедоступный API и как реализовать функциональность.

В основе у Redux есть несколько основных библиотек для работы с сайд эффектами:
- Thunks: отправить экшен, получить (dispatch, getState) в аргументах и выполнить любую логику внутри функции.
- Sagas: напишите функцию генератор, которая на экшен вызывает сайд эффект функцию.
- Observables: напишите RxJs пайплайн, который на экшен вызывает сайд эффект функцию.

По умолчанию в Redux Toolkit был выбран Thunks, как самый простой вариант работы с сайд эффектами. При разработке API createListenerMiddleware команда Redux Toolkit хотела отделить экшены и сайд эффекты, т.е. смотрела в сторону redux-saga. Однако по сложности пользовательского API была цель сделать его близким к redux-thunk.

https://blog.isquaredsoftware.com/2022/03/designing-rtk-listener-middleware/

Тинькофф представил React фреймворк tramvai

Компания Тинькофф выложила в opensource свой React фреймворк для создания SSR приложений tramvai. Фреймворк похож на node.js фреймворк Nest.js, в нем также есть DI и модули.

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

Выглядит очень необычно. Будет ли пользоваться спросом данный фреймворк где-то за пределами проектов Тинькофф – вопрос интересный.

https://tramvai.dev/
https://habr.com/ru/post/655953/

Аналоги Storybook

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

React Cosmos
- Песочница как в Storybook. Возможность разработки компонентов в изоляции.
- Помощь в организации библиотеки компонентов. Возможность установки любых пропсов для компонентов.
- Удобный интерфейс. Есть возможность просмотра компонента в разных размерах окна.

React Styleguidist
- Автогенерация документации. Интерактивные примеры.
- Возможность написания примеров в Markdown разметке.
- Удобен для создания документации библиотеки компонентов.

Ladle
- Создан как замена Storybook разработчиками из Uber. Можно использовать в уже существующем проекте с историями Storybook.
- Production сборка проекта в 4 раза быстрее чем Storybook. Использует code splitting для разделения историй.
- Позволяет сохранять состояние компонента в URL – полезно для тестирования.

Критический путь рендеринга

Критический путь рендеринга – это шаги от получения браузером HTML и до отрисовки страницы пользователю. Для того, чтобы этот процесс был быстрым, необходима оптимизация этих шагов.

При парсинге HTML браузер строит DOM дерево, для CSS строится CSSOM дерево. Если при парсинге HTML будет обнаружен JS, то он будет выполнен (если это не модуль или нет атрибута defer). Стили и JS скрипты являются блокирующими для парсера ресурсами, что может сказаться на времени критического пути рендеринга.

Чтобы ускорить время критического пути рендеринга, нужно делать оптимизацию:
- Сократить CSS ресурсы для первоначальной загрузки. Стили, которые не нужны для просмотра текущей страницы, можно загрузить после.
- Используйте ленивую загрузку. Разделяйте страницы сайта на части.
- Используйте Async, Defer, Preload для скриптов.
- Кэширование ресурсов. Можно использовать заголовки ETag, Cache-Control, Last-Modified, Expires для валидации кэша в браузере, а также ServiceWorker для ручного кэширования нужных ресурсов.

При разработке на React также стоит соблюдать правила оптимизации:
- Используйте lazy loading роуты.
- Условный рендер компонентов. Если компонент тяжелый и ,например, открывается по клику на кнопку, то можно загружать его по потребности.

https://indepth.dev/posts/1498/101-javanoscript-critical-rendering-path

Релиз React 18

На npm появилась стабильная 18 версия React.

В новой версии React появился автоматический батчинг, новое API, такое как startTransition, потоковый серверный рендер с использованием Suspense и другие улучшения.

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

Также появились новые хуки:
- useId для генерации уникального ID на клиенте и сервере, чтобы избежать проблем с гидратацией.
- useTransition и startTransition для несрочных изменений стейта.
- useDeferredValue для несрочного рендера значений.

https://reactjs.org/blog/2022/03/29/react-v18.html

Как работают роуты в Remix

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

В Remix можно создавать общий шаблон для страниц:

├───/apps
│  ├───/routes
│   │   ├───/posts    // компоненты постов
│   │   └───posts.jsx // это шаблон

В файле posts.jsx используется Remix компонент <Outlet />, который вместо себя рендерит вложенные компоненты, как в react-router.

├───/apps
│   ├───/routes
│   |   └───/users
│   |         ├───$userId.edit.jsx
│   |         ├───$userId.jsx
│   │         └───$.jsx

Для создания динамического роута необходимо начать имя файла со знака $. Чтобы получить название параметра в компоненте нужно использовать хук: const { userId } = useParams().

Также можно определять дополнительные сегменты пути роута через точку. Теперь компонент $userId.edit.jsx будет открываться по пути /users/{{user-id}}/edit.

Если нужно создать роут, который бы открывался по любому пути, нужно создать файл с названием $.jsx. Тогда, если нет подходящего роута по данному URL, будет открываться $.jsx.

https://www.smashingmagazine.com/2022/03/remix-routes-demystified/

Когда React рендерит компонент

Чтобы эффективно создавать приложения на React, полезно понимать поведение рендеринга React и знать правила как избежать повторный рендер.

React рендерит компонент, если:
- у компонента запланировано обновление стейта.
- произошел рендер родительского компонента и текущий компонент не соответствует критериям отказа от повторного рендера, где все эти четыре условия должны выполняться одновременно:
- Компонент был уже отрендерен и смонтирован.
- Нет изменений пропсов.
- Нет изменений в значении контекста, который используется в компоненте.
- Сам компонент не запланировал обновление.

Существуют два типа рендеринга, которые могут произойти с компонентом:
- активный рендеринг:
- Компонент (или кастомный хук) заранее планирует обновления для изменения стейта.
- Прямой вызов ReactDOM.render.
- пассивный рендеринг: родительский компонент запланировал обновление стейта и текущий компонент не соответствует критериям отказа от повторного рендера (четыре условия выше).

https://www.zhenghao.io/posts/react-rerender

Как React 18 может сломать ваше приложение

Уже сейчас можно обновить библиотеку React до 18 версии, и разработчики утверждают, что обновление должно быть безболезненным. Однако, иногда после обновления могут происходить ошибки в приложениях. Связано это с новым режимом работы StrictMode.

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

* React mounts the component.
    * Layout effects are created.
    * Effect effects are created.
* React simulates effects being destroyed on a mounted component.
    * Layout effects are destroyed.
    * Effects are destroyed.
* React simulates effects being re-created on a mounted component.
    * Layout effects are created
    * Effect setup code runs

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

function useIsMounted() {
  const isMountedRef = React.useRef(true);
  React.useEffect(() => {
     return () => {
       isMountedRef.current = false;
     };
  }, []);
  return () => isMountedRef.current;
}

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

React.useEffect(() => {
  isMountedRef.current = true;  
  return () => {
          isMountedRef.current = false;
    };
}, []);

Изменения типов в React 18

Вышло мажорное обновление библиотеки типов для React 18 @types/react@^18.0.0. В нем есть несколько критических изменений:

- Убран неявный проп children в React.FC и React.Component. Теперь, если компонент ожидает проп children, то его нужно передавать явно:

interface Props {
 children?: React.ReactNode;
}

const SomeFunctionComponent: React.FC<Props> = props => <div>{props.children}</div>

Есть несколько причин, почему был удален проп children. Во первых, очень часто этот проп не использовался. Но так как он был объявлен в типах, то это могло приводить к неверным предположениям о работе компонента (раз есть проп children, то значит он как-то используется внутри компонента). Во вторых, более строгая типизация пропа children, теперь можно самостоятельно указать его тип. Более подробно про причины удаления неявного children написано здесь.

- Убран тип {} у ReactFragment. Это никогда не было правильным и в основном требовалось для взаимодействия с неявными пропом children.

- this.context по умолчанию станет unknown. Раньше по умолчанию был any. Это распространяется и на функцию useCallback, теперь, если тип не указан, то по умолчанию аргумент будет unknown.

- Удалены неиспользуемые типы. Приведены к общей терминологии, как они называются в репозитории и документации:

-StatelessComponent
+FunctionComponent

-SFC
+FC

-React.ReactType
+React.ElementType

-SFCElement
+FunctionComponentElement

// без замены
-Props
-RefForwardingComponent
-SFCFactory

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210

Композиция компонентов в React: как сделать это правильно

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

В React есть несколько подходов к композиции компонентов. Есть “простые” компоненты:

const Button = ({ noscript, onClick }) => <button onClick={onClick}>{noscript}</button>;

И компоненты контейнеры:

const Button = ({ children, onClick }) => <button onClick={onClick}>{children}</button>;

У компонента контейнера вместо пропса noscript проп children. Это различие позволяет более гибко использовать компонент контейнер и передавать в children любые элементы, при этом синтаксис выглядит как использование обычного HTML тега.

Можно определить следующие правила для декомпозиции компонента:

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

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

- Начинайте композицию с “простых” компонентов, а другие подходы композиции используйте по мере необходимости.

Также стоит отметить про принцип Единый Уровень Абстракции (Single Level of Abstraction).

https://www.developerway.com/posts/components-composition-how-to-get-it-right