Заметки про React

State of React 2024 Вышла статистика по React за 2024. В ней собрана информация о наиболее/наименее популярных фичах в React, библиотеках, инструментах. Вот наиболее интересные факты: ⭐️ forwardRef — самый нелюбимый API в React, который, кстати, в 19 версии стал устаревшим и можно прокидывать ref напрямую в пропсы. ⭐️ React Compiler и React Server Components наиболее популярные из новых фич React, при этом RSC наиболее сложная и непонятная. ⭐️ Taint API – самый неизвестный API, но это и понятно,...

react-scan для поиска проблем производительности Вышла библиотека react-scan для поиска проблем производительности и устранения медленного рендера приложения. В отличии от других похожих библиотек, для установки react-scan не требуется изменений в коде приложения, достаточно вставить тег <script> или можно установить как модуль. Библиотека react-scan выделяет только те компоненты, которые надо оптимизировать. Разработчики обещают в будущем выпустить расширение для браузера. https://github.com/ai...

Сохранение данных форм с помощью Nuqs Во время заполнения формы может потребоваться промежуточное сохранение данных, чтобы при обновлении страницы пользователь не потерял введенные данные, либо поделиться данными формой с другими пользователями. Вариант с localStorage не самый подходящий, с его помощью нельзя поделиться ссылкой на форму с другими пользователями. Автор статьи предлагает использовать библиотеку Nuqs, с помощью которой можно сохранять данные формы в URL в query params. Его можно ле...

API captureOwnerStack Недавно вышедший экспериментальный API React теперь официально задокументирован и без флага. Этот API особенно полезно библиотекам и фреймворкам, поскольку позволяет дополнить вывод ошибки пользователю. API доступно только в development режиме и считывает текущий Owner Stack и возвращает его в виде строки. Пример: import * as React from 'react'; function Component() { if (process.env.NODE_ENV !== 'production') { const ownerStack = React.captureOwnerStack(); console.log(owne...

Делаем использование FormData типобезопасным Новый хук useActionState в React 19 позволяет обрабатывать отправку данных в формах, пример: export default function Page() { const [_, action, pending] = useActionState((_: unknown, formData: FormData) => { const firstName = formData.get("firstName"); const age = formData.get("age"); }, null); return ( <form action={action}> <input type="text" name="firstName" /> <input type="number" name="age" /> <button type="submit" disabled={pending}>Submit</butt...

Реактивность – это легко Стандартный useContext заставляет обновляться все компоненты-потребители, даже если им не нужна изменившаяся часть состояния. Это приводит к лишним ре-рендерам, особенно в больших компонентах вроде таблиц или списков. Автор статьи столкнулся с этим в MUI X Data Grid: клик по одной ячейке вызывал ре-рендер всех остальных. Решение — точечная подписка через селекторы Вместо того, чтобы хранить состояние в useState и передавать его через Context, можно использовать внешний S...

Почему я не буду использовать JSDOM Артем Захарченко предлагает перестать пользоваться библиотекой JSDOM при написании тестов компонентов. JSDOM эмулирует браузер в Node.js, но со своими особенностями. Например, событие Event использует класс dom.window.Event из JSDOM. Это событие не является браузерным или даже Node.js событием. Поэтому произойдет ошибка, если это событие будет обработано где-то еще, кроме JSDOM, например: import { JSDOM } from 'jsdom' const dom = new JSDOM() const clickEvent =...

UX++ и DX++ с движками синхронизации В своем блоге Карл Ассманн объясняет почему сложно инвалидировать запросы и реализовать оптимистичный UI с React Query. Сложность в инвалидации запросов заключается в том, что надо знать какие запросы нужно инвалидировать и когда. Если инвалидировать лишние ключи, то будут выполняться лишние запросы в сети. Также нужно знать все ключи, которые надо инвалидировать, иначе часть UI будет продолжать показывать устаревшие данные. Для эффективной реализации оптимис...

Остерегайтесь скрытых проблем при работе с search params Типо-безопасность — это только вершина айсберга, о которой вспоминают разработчики при работе с search params. Автор библиотеки nuqs предупреждает о скрытых проблемах при работе с search params. Запись и чтение. Для получения типо-безопасного стейта search params необходимо внедрять библиотеки валидации (например Zod). Для записи в search params сложных стейтов, а потом для их чтения обратно, понадобятся функции сериализации и парсинга соо...

TypeScript перепишут на Go Новую версию TypeScript перепишут на Go. Это связано в первую очередь со скоростью работы. TypeScript медленно работает на больших кодовых базах. Особенно это замечается при рефакторинге кода в VS Code, например когда переименовываешь переменную или ищешь все ссылки на интерфейс. По заверениям Андерса Хейлсберга, при использовании компилятора на Go, скорость работы команды tsc увеличивается в 10 раз. Например, запуск tsc на кодовой базе Playwright вместо 11 секунд зани...