Заметки про React. Страница 2
667
@ru_react_notes
Короткие и полезные заметки про React
-
Заметки про React
Использование useMutation для оптимистических изменений Туториал по использованию React Query для использования оптимистических изменений для компонента “переключатель”. В туториале описано, как использовать хук useMutation, useQuery, как локально обновить кэш и инвалидировать его. Описание поведения переключателя в туториале: - Переключатель должен делать запрос при клике на него. - Пока запрос выполняется, должен появиться спиннер загрузки. - Если запрос выполнен успешно, то показать иконку галочки. - Переключатель должен обновляться оптимистично, т.е. предполагается, что запрос будет выполнен успешно. - Если запрос не выполнен, то надо показать иконку ошибки и вернуть переключатель в предыдущее состояние. www.propelauth.com/post/us…in-react -
Заметки про React
Телепортация в React: позиционирование, контекст наложения и порталы В блоге Нади Макаревич вышел обзор о причинах использования порталов в React. Основная причина, по которой стоит прибегать к использованию порталов – избежать проблем с контекстом наложения DOM элементов. В порталах можно рендерить модальные окна, чтобы они всегда были поверх других слоев. Также в статье разобрано свойство position, какие у него есть значения и как они влияют на DOM. С помощью position можно определить, как будет отображаться элемент. Свойство position подвержено контексту наложения, поэтому все равно используют порталы для отображения модальных окон. www.developerway.com/posts/p…in-react -
Заметки про React
Hyper Fetch 5.0: фреймворк для получения данных Hyper Fetch – относительно новый фреймворк для получения данных. Он включает в себя логику для выполнения запросов, кэширования, создания очередей и offline-first режима. Основные особенности: - написан на TypeScript. - есть мапперы запросов/ответов, где можно сделать валидацию. - поддержка дедупликации запросов, создание очереди запросов, создание интерцепторов, отмена запросов. - поддержка кастомных адаптеров, включая Firebase и Graphql. - есть отдельный модуль для работы с сокетами. - встроенная возможность создания моков. - есть поддержка React. Примеры создания запросов: export const getUser = builder.createRequest<UserModel>()({ endpoint: "/api/user/:userId", cache: true, cacheTime: DateInterval.second * 10 }); export const postFile = builder .createRequest<{ response: string }, { file: File }>()({ endpoint: "/api/files", method: "POST", queued: true, retry: 0 }) .setDataMapper((data) => { try { const formData = new FormData(); formData.append("file", data.file); return formData; } catch (err) { return data; } });https://hyperfetch.bettertyped.com/ -
Реклама
-
Заметки про React
Современный CSS для динамической компонентной архитектуры В блоге Modern CSS вышел гайд по использованию современного CSS с фокусом на темизацию, адаптивный макет и дизайн компонентов. Стефани Эклз рассказывает про фичи CSS, которые улучшают организацию кода и про фичи компоновки, такие как grid и container query. Также автор разберет как создать основные компоненты дизайн системы с помощью современного CSS: кнопка, карточка, пагинация. moderncss.dev/modern-…itecture -
Заметки про React
Как BlueSky структурирует приложение и управляет стейтом Алекс Кондов в своем блоге разобрал архитектуру приложения BlueSky. BlueSky – это социальная сеть, универсальное приложение, которое использует react-native и создается для веба и как приложение для iOS/Android. Изучение открытых проектов помогает изучить новые архитектурные подходы и приемы в организации стейта. В BlueSky в качестве стейт-менеджера используется Mobx и использует ООП-подход для реализации стейта в классах моделей. Вся бизнес логика находится в классах-стейтах, а компоненты используют ее. https://alexkondov.com/reading-code-bluesky/ -
Заметки про React
Million.js: замена VDOM для React Million.js – это замена VDOM для React, которая увеличивает скорость работы приложения в несколько раз. Библиотека использует подход Block Virtual DOM, который по другому определяет различия и его работу можно разбить на две части: 1. Статический анализ: Virtual DOM анализируется для извлечения динамических частей дерева в хэш-карту, сопоставляя их со стейтом. 2. Грязная проверка: стейт (не Virtual DOM) сравнивается, чтобы определить, что изменилось. Если стейт изменился, то DOM обновляется через хэш-карту. Таким образом, Million.js наиболее эффективен в случае, когда на сайте много статического контента и мало динамических частей. В Million.js есть свои ограничения и правила, которые созданы для увеличения производительности приложения. Например, одно из них – не рекомендуется использовать UI библиотеки типа Material UI или Chakra UI, т.к. они не оптимизированы для работы с Million.js. https://million.dev/ -
Заметки про React
Новый хук useFormStatus В React смержен ПР с добавлением нового экспериментального хука useFormStatus. Этот хук читает статус формы родительского компонента, если он существует: const {pending, data, action, method} = useFormStatus();Его можно использовать для отображения индикатора загрузки. Хук сделан на основе хука useTransition. Для реализации внутри используется startTransition и объект контекста. https://github.com/facebook/react/pull/26722 -
Заметки про React
Релиз TypeScript 5.1 Beta Вышел релиз TypeScript 5.1 Beta, в котором есть несколько изменений для React. Главное из них в том, что TypeScript позволит библиотекам объявлять свой собственный валидный JSX тип элемента. Связано это с тем, что в текущий момент функция компонента может вернуть только null | JSX.Element. Однако, в React компоненты могут возвращатьReactNode. Этот тип включает в себяnumber | string | Iterable<ReactNode> | undefinedи также в будущем будет включатьPromise<ReactNode>. Таким образом, при обновлении на TypeScript 5.1+ открываются следующие возможности: - использование асинхронных серверных компонентов. - в функциях компонента возвращать значение из списка ReactNode без использования Fragment. - другие возможности, такие как зеркальный курсор для редактирования JSX тега в VSCode и использование атрибутов JSX с пространством имен. devblogs.microsoft.com/typescr…5-1-beta -
Заметки про React
Гайд по необязательным параметрам в React React API содержит несколько необязательных и альтернативных параметров. Большинство из них предназначены для оптимизации, поэтому будет полезно о них знать. В блоге Джулс Блом вышел анимированный гайд по необязательным и альтернативным параметрам в React, которые редко используются. Например, useState принимает альтернативный аргумент – функцию инициализации. Этот подход можно использовать для ленивых вычислений, если нужно передать в стейт тяжелое вычисление или прочитать из localStorage. В таком случае, операция будет произведена один раз – при первом рендере компонента: const getInitialState = () => Number(window.localStorage.getItem('count')) const [count, setCount] = React.useState(getInitialState)julesblom.com/writing…rameters -
Заметки про React
Скажем нет “мерцающему” UI: useLayoutEffect и браузерная отрисовка Надя Макаревич разобрала в своем блоге как работает хук useLayoutEffect и в чем его разница с useEffect, как работает браузерная отрисовка и как подружить useLayoutEffect и SSR. Основное отличие в том, что useLayoutEffect запускается синхронно перед отрисовкой браузера. А useEffect будет запускаться асинхронно после отрисовки браузера, но это не гарантировано. При SSR возможны “мерцания” интерфейса, если например где-то рендерятся компоненты по условию, вычисляемому в useLayoutEffect. Причина в том, что между моментом отрисовки браузером HTML/CSS полученного от сервера до выполнения useLayoutEffect проходит некоторое время. На сервере useLayoutEffect не выполняется, поэтому пользователю придется ждать когда он выполнится на клиенте после загрузки и исполнения JS. Чтобы избежать “мерцания” можно на сервере возвращать заглушку компонента. www.developerway.com/posts/n…ering-ui -
Заметки про React
Сборник задач по TypeScript Type Challenges – большой сборник задач по TypeScript, разбитый по категориям и уровню сложности. Решать задачи предлагается в песочнице TypeScript, там же уже есть тесты для проверки решения. Этот проект своего рода LeetCode, только для тренировки навыков написания TypeScript типов. github.com/type-ch…allenges Еще один интересный проект по TypeScript – курс по типам от автора библиотеки TS-Pattern. Хоть курс и платный, первые четыре статьи бесплатные. В них много интересного материала по созданию типов в TypeScript, и в конце статьи есть задачи на практику. https://type-level-typescript.com/ -
Заметки про React
Популярные ошибки при работе с React В блоге Alex Khomenko вышел обзор популярных ошибок при работе с React. Некоторые из них: Изменение стейта напрямую При обновлении не примитивных значений, таких как объект или массив, нужно предоставить другую ссылку на объект. В ином случае, React не поймет, что стейт изменился и нужно сделать ре-рендер. Для решения проблемы можно использовать спред оператор, map для изменения объектов внутри массива, новое API structuredClone или библиотеки для работы с иммутабельностью, например Immer.js. Забыть, что обновление стейта происходит асинхронно Часто бывает, что пытаются обратиться к значению стейта сразу после его установки: function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); console.log(count); // 0 }; }Однако, значение стейта обновится только при следующем рендере. Следовательно, нет смысла сразу читать значение стейта после установки. Для решения проблемы можно использовать useEffect. claritydev.net/blog/th…ng-react -
Заметки про React
Modern.js – фреймворк от ByteDance Modern.js - это фреймворк на React от ByteDance. Возможно, вы не слышали о нем, но это полноценный фреймворк на React, у которого уже вышла 2ая версия, и есть готовая экосистема инструментов. Фреймворк похож на Next.js и Remix. Роутинг на основе структуры в файловой системе, и есть файлы layout и page для рендера страниц. Для загрузки данных используются файлы layout.loader.ts и page.loader.ts, в которых экспортируются функции получения данных. Для получения данных в компоненте страницы используется хук useLoaderData. // page.loader.ts export type ProfileData = { /* some types */ }; export default async (): Promise<ProfileData> => { const res = await fetch('https://api/user/profile'); return await res.json(); }; // page.tsx import { useLoaderData } from '@modern-js/runtime/router'; import type { ProfileData } from './page.loader.ts'; export default function UserPage() { const profileData = useLoaderData() as ProfileData; return <div>{profileData}</div>; }Другие возможности: - Создание BFF. Для этого нужно добавить BFF плагин в конфиг, и можно определять свои функции в папке/api. - Кастомизация веб-сервера. Можно добавить обработку аутентификации пользователя, пререндеринг скелетона приложения и т.д. - Встроенная поддержка микро-фронтенда. Через конфиг можно настроить работу нескольких фронтенд приложений. - Есть встроенный стейт-менеджер – Reduck, созданный на основе Redux. Помимо фреймворка в экосистеме есть Modern.js Module и Modern.js Doc. Это инструменты для создания npm пакетов и фреймворк для создания документов соответственно. https://modernjs.dev/en -
Заметки про React
Увеличиваем скорость работы Tanstack Table быстрее в 1000 раз В блоге Jp Camara статья с разбором проблемы с производительностью библиотеки Tanstack Table. Проблема была в том, что при использовании таблицы с группировкой столбцов, рендеринг 50к строк занимал 30-40 секунд. Использовать браузерный профайлер было невозможно из-за слишком медленной работы приложения. Поэтому для оценки скорости рендера и поиска проблемных мест использовался console.time. Проблема была обнаружена внутри функции группировки библиотеки Tanstack Table: function groupBy(rows, columnId) { const groupMap = new Map<any, Row<TData>[]>() return rows.reduce((map, row) => { const resKey = `${row.getValue(columnId)}` const previous = map.get(resKey) if (!previous) { map.set(resKey, [row]) } else { map.set(resKey, [...previous, row]) } return map }, groupMap) }Здесь использовался спред оператор[…previous, row]для конкатенации текущей строки в конец массива. Так как он использовался внутри другого цикла reduce, то сложность функции группировки была O(n^2). Поэтому для 50к строк выполнялось 2,5 миллиарда итераций. jpcamara.com/2023/03…ble.html -
Заметки про React
Написание собственной библиотеки Сигнал Люк Шафер в своем блоге сделал туториал по созданию собственной библиотеки наподобие Сигнал. Получилась упрощенная версия без оптимизаций, но достаточная, чтобы понять саму концепцию. Сигнал в основном используется в SolidJS и также был добавлен в Angular, Preact и Qwik. Сигнал можно использовать и в React, используя @preact/signals-react. Пример использования:export function Counter() { const [count, setCount] = createSignal(0); return <button onClick={() => setCount(count() + 1)}>{count()}</button> }www.lksh.dev/blog/wr…-library -
Реклама
-
Заметки про React
ChatGPT уже сейчас разделил жизнь многих людей на «До» и «После». Для фронтенда ИИ может генерировать код, исправлять ошибки, улучшать удобство сайта и давать персональные рекомендации. Обсудим возможности ИИ для фронтенда на бесплатном вебинаре, который проведут тимлиды из ВКонтакте и Frogly (Chrome Extension) В итоге вы на практических примерах узнаете, как использовать ChatGPT для ускорения фронтенд-разработки, а также поймёте насколько опасен (и опасен ли?) ChatGPT для карьеры. Встречаемся 12 апреля в 19:00 (по Москве) в прямом эфире. Регистрируйтесь по ссылке 
-
Заметки про React
React Chrono – гибкий компонент таймлайна Вышел релиз второй версии библиотеки React Chrono. С помощью этой библиотеки можно рендерить кастомизируемые таймлайны в вертикальной и горизонтальной ориентации. В новой версии появилась возможность рендерить вложенные таймлайны. https://react-chrono.prabhumurthy.com/ -
Заметки про React
Переосмысление лучших практик React React 18, наряду с React Server Components, сделал значительный шаг в сторону серверного рендера. Особенно это видно в таких фреймворках как Remix и Next, где поток данных распространяется на сервер, и приложение превращается в MPA с интерактивностью SPA. На FrontendMastery вышла статья, в которой проведен анализ эволюции React от библиотеки представления на стороне клиента до фреймворков с рендером на сервере. frontendmastery.com/posts/r…ractices