tRPC – замена REST и GraphQL

Заметил в Blitz интересный подход по работе с API и обнаружил библиотеку tRPC, которая делает точно так же, но не привязана к конкретному фреймворку.

Библиотека реализует технологию RPC по передаче данных. Все запросы делятся на получение и изменение данных и отправляются на один URL. Ответ на запрос приходит в формате JSON, из которого можно получить состояние ответа, сообщение об ошибке и данные. Если одновременно необходимо отправить несколько запросов, то их можно забатчить – объединить в один.

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

Для React в tRPC есть готовые хуки useQuery и useMutation для получения и изменения данных. Также есть готовый плагин для Next.js для поддержки SSR и SSG.

// server/index.ts
import * as trpc from '@trpc/server';
import { z } from 'zod';

const appRouter = trpc
  .router()
  .query('getUser', {
    input: (val: unknown) => {
      if (typeof val === 'string') return val;
      throw new Error(`Invalid input: ${typeof val}`);
    },
    async resolve(req) {
      req.input; // string
      return { id: req.input, name: 'Bilbo' };
    },
  })
  .mutation('createUser', {
    // validate input with Zod
    input: z.object({ name: z.string().min(5) }),
    async resolve(req) {
      // use your ORM of choice
      return await UserModel.create({
        data: req.input,
      });
    },
  });

export type AppRouter = typeof appRouter;

https://trpc.io/

Обзор React Router v6

Тайлер МакГиннис написал подробный обзор про React Router v6.

React Router используется в 44% проектах в React. Проблема в том, что не все готовы уделить время на изучение того, как работает React Router. Поэтому МакГиннис собрал в одной статье основную информацию для базового понимания роутера.

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

https://ui.dev/react-router-tutorial/

Решаем проблему проп дриллинга

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

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

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

function App() {
  const [data, setData] = useState("some state");

  return (
    <ParentComponent>
      <ComponentOne>
        <ComponentTwo data={data} />
      </ComponentOne>
    </ParentComponent>
  );
}

https://blog.logrocket.com/solving-prop-drilling-react-apps/#container-components

Хочу провести небольшой опрос по инструментам тестирования на React проектах:

Условные выражения в JSX

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

- Рендеринг по числовому условию. Конструкция вида {gallery.length && <Gallery slides={gallery}>} может отрендерить в DOM число 0. Если gallery.length будет равен 0, то оно как falsy значение будет сразу возвращено из конструкции &&. Чтобы исправить проблему, можно использовать тернарный оператор: {gallery.length ? <Gallery slides={gallery} /> : null}.

- Условное И (&&) имеет больший приоритет, поэтому в конструкциях где имеются И (&&) и ИЛИ (||) используйте скобки для определения приоритета. Например: {cond1 || cond2 && <JSX />} тоже самое что и {cond1 || (cond2 && <JSX />)}, поэтому пишите явно {(cond1 || cond2) && <JSX />}.

- Не зацикливайтесь на тернарных операторах. Если есть вложенные тернарные операторы, то это плохой знак. Вместо вложенных тернарных операторов попробуйте использовать логическое И (&&) или функцию с if/else:

{isEmoji
    ? <EmojiButton />
    : isCoupon
        ? <CouponButton />
        : isLoaded && <ShareButton />}

Код выше можно заменить на функцию:

const getButton = () => {
    if (isEmoji) return <EmojiButton />;
    if (isCoupon) return <CouponButton />;
    return isLoaded ? <ShareButton /> : null;
};

- Будьте аккуратны с props.children в условиях. В props.children может быть пустой массив, фрагмент, одиночный элемент. Поэтому условие {props.children && <div>{props.children}</div>} может привести к багам.

- Одинаковые элементы будут обновляться. Например, код {hasItem ? <Item id={1} /> : <Item id={2} />} будет эквивалентен коду <Item id={hasItem ? 1 : 2} />. Это значит, что при изменении hasItem компонент Item не будет размонтироваться и монтироваться заново, вместо этого будет обновление пропсов.

https://thoughtspile.github.io/2022/01/17/jsx-conditionals/

React server components под капотом

Чан Ву рассказал про внутреннее устройство React server components (RSC) — "How React server components work: an in-depth guide".

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

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

#react #internals

https://blog.plasmic.app/posts/how-react-server-components-work/

Исправление ошибок гидратации

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

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

Один из способов решения подобных проблем – использование эффектов, о котором подробно рассказал Бен Илегбод в своей статье.

https://www.benmvp.com/blog/handling-react-server-mismatch-error/

Проблемы в типизации children

Рассмотрим пример компонента:

const Card: React.FC = props => { ... }

export default function App() {
  const randomObject = {};
  return (
    <div className="App">
      <Card>{randomObject}</Card>
    </div>
  );
}

Со стороны TypeScript в данном коде нет ошибок, компонент скомпилируется. Но при запуске приложения будет ошибка со стороны React: Objects are not valid as a React child (found: object with keys {}).
Проблема в том, что неверно написаны типы для React.ReactNode. Если посмотреть в исходники типов, то можно увидеть, что ReactNode расширяется от ReactFragment, который разрешает использование объекта {}.

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

При разработке компонентов, которые принимают children, стоит учитывать ошибку в типах React. Вариант решения проблемы – создать свой тип ReactNode, который не допускает использование объекта.

https://fettblog.eu/react-types-for-children-are-broken/

Лучшие практики React Testing Library

Бен Илегбоду делится лучшими практиками при работе с библиотекой для тестирования Testing Library. Кратко о них:

- Используйте user-event вместо fireEvent для взаимодействия с элементами в компоненте. Библиотека Testing Library экспортирует fireEvent, но её API более низкоуровневое. Гораздо проще и читабельнее будет использование user-event.

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

- Используйте screen вместо деструктуризации render. Эта практика избавит от постоянного изменения объекта деструктуризации по мере добавления или удаления нужных нам запросов.

- Правильно используйте waitFor. Не кладите в колбек waitFor вызовы функций сайд-эффектов, например, клик по кнопке или ввод текста. Внутри waitFor должно быть только утверждение (expect). Связано это с тем, что waitFor вызывает функцию колбека несколько раз, пока утверждение внутри него не станет верным или закончится время на проверку.

Большинство случаев поддержки лучших практик можно добиться установкой правил ESLint для Testing Library, например, eslint-plugin-testing-library.

https://www.benmvp.com/blog/react-testing-library-best-practices/

Новая документация React

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

https://beta.reactjs.org/

Тестирование React компонентов с помощью Testing Library

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

https://dev.to/ohdylan/react-component-testing-54ie

Кастомные хуки и производительность приложения

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

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

https://www.developerway.com/posts/why-custom-react-hooks-could-destroy-your-app-performance

Лучшие практики React

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

- Поддержка кода. В начальной стадии проекта нет проблем с поддержкой. Но с ростом количества требований проект становится все больше. Компоненты становятся сложнее и менее поддерживаемыми.

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

- Уверенное понимание React. Проблема в том, что разработчики плохо понимают как работает React под капотом. Это может привести к багам и проблемам с производительностью приложения.


В статье даны как архитектурные, так и практические советы по написанию кода для начинающих разработчиков. Разберем кратко часть из них:

- Создайте хорошую структуру проекта. Организация файлов и папок в проекте влияет на удобство поддержки и масштабируемости.

- Поддерживайте порядок импортов. Разделяйте импорты по уровням, например, сначала внешние модули, потом внутренние модули. Управлять порядком импортов можно с помощью линтера.

- Изучайте разные паттерны компонентов. Например, использование compound components позволяет избавиться от проп дриллинга.

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

- Используйте lazy loading / code splitting. Уменьшение размера бандла положительно скажется на скорости загрузки сайта.

- Обрабатывайте ошибки. Используйте обертку React Error Boundary, чтобы перехватывать ошибки в компонентах и, например, передавать эти ошибки на сервер в логи.

https://www.freecodecamp.org/news/best-practices-for-react/

Какую проблему решают веб-фреймворки

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

В качестве основного фреймворка для исследования был выбран React. В дополнение к нему были выбраны три новых фреймворка: SolidJS, Svelte и Lit.

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

На VanillaJS, для реализации в своем приложении паттернов из популярных фреймворков можно использовать уже готовые вещи из веб-платформы. Для декларативного стиля программирования использовать HTML и CSS, а для реактивности использовать CSS каскад.

Часть 1. https://www.smashingmagazine.com/2022/01/web-frameworks-guide-part1/
Часть 2. https://www.smashingmagazine.com/2022/02/web-frameworks-guide-part2/

Производительные 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