ReaPer : Инструмент с открытым исходным кодом для анализа производительности React-приложений

https://medium.com/@annako/reaper-an-open-source-dev-tool-to-analyze-react-application-performance-786f1d40f6de

✍️ @React_lib

Многопоточное приложение React с использованием useWorker

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

https://dev.to/nilanth/multi-threaded-react-app-using-useworker-gf8

✍️ @React_lib

Headless Component: паттерн для создания пользовательских интерфейсов React

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

https://martinfowler.com/articles/headless-component.html

✍️ @React_lib

Как создавать собственные пользовательские React Hooks

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

https://blog.logrocket.com/create-your-own-custom-react-hooks/

✍️ @React_lib

Деструктуризация в React. Очевидно, но важно

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

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

Как часто Вам приходилось сталкиваться с подобным кодом?

export default function ParentComponent ({ post }) {
const { images, title } = post

return (
<ChildComponent images={images} title={title} />
)
}

https://habr.com/ru/articles/804187/

✍️ @React_lib

React-query

Хуки для получения, кэширования и обновления асинхронных данных в React

• Transport/Protocol/Backend независимая выборка данных (REST, GraphQL, promises, что угодно!)
• Автоматическое кэширование + выборка (stale-while-revalidate, Window Refocus, Polling/Realtime)
• Параллельные + зависимые запросы
• Мутации + Reactive выборка запросов
• Многослойный кэш + автоматический сборщик «мусора» (garbage collector)
• Load-More + Infinite Scroll Queries w/ Scroll Recovery
• Отмена запросов и многое друго

https://github.com/TanStack/query

✍️ @React_lib

Понимаем полностью useMemo и useCallback

Экскурсия по двум самым известным хукам в React
Если вы изо всех сил пытались разобраться в useMemo и useCallback, вы не одиноки! Я разговаривал со многими разработчиками React, которые cломали голову над этими двумя хуками.

Моя цель в этом здесь — прояснить всю эту путаницу. Мы узнаем, что они делают, почему они полезны и как получить от них максимальную пользу.

https://habr.com/ru/articles/807139/

✍️ @React_lib

React-magic-motion

Это библиотека react.js, которая ✨ волшебным образом анимирует ваши компоненты.

https://www.react-magic-motion.com/

✍️ @React_lib

Разделение логики и представления в React-приложении

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

00:00 Постановка задачи
02:13 HOC - компоненты высшего порядка
16:34 Hooks - кастомные хуки
26:39 Подведение итогов

источник

✍️ @React_lib

React 19 больше не будет поддерживать fetch() 🌶🌶🌶

Вам придется использовать React.cache(), чтобы избежать дублирования запросов fetch().

https://github.com/facebook/react/pull/28896

✍️ @React_lib

React 19: forwardRef → ref

✍️ @React_lib

Авторизация в React - базовые сведения

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

https://danshin.ms/simple-login-react-app/

✍️ @React_lib

⚛️ Как использовать композицию в React для создания расширяемых компонентов?

✍️ @React_lib

⚛️ Вместо того чтобы смешивать бизнес-логику в компонентах React, мне нравится создавать небольшие и предсказуемые абстракции reducer с помощью useReducer

✍️ @React_lib

⚛️ useEffect против useLayoutEffect

useEffect: асинхронный и не задерживает отрисовку DOM в браузере.

useLayoutEffect: синхронный, и он задерживает отрисовку DOM для браузера. Он выполняет свой код непосредственно перед отрисовкой в браузере.

✍️ @React_lib

Совет по React💡

Отложите создание non-primitive values, если вы используете их в массиве зависимостей.

✍️ @React_lib

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

✍️ @React_lib

Переход на React

В Daily Dev рассказали, как мигрировали с Preact на React, стремясь решить проблемы разработки и повысить производительность. Переход, осуществленный в ходе командного хакатона, потребовал значительного планирования, тестирования и корректировки кодовой базы. Этот переход обеспечил лучшую совместимость с Next.js, улучшил опыт разработки и подготовил платформу к будущим технологическим достижениям.

https://daily.dev/blog/moving-back-to-react

✍️ @React_lib

Создание и отправка электронных писем с помощью React

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

https://github.com/resendlabs/react-email

✍️ @React_lib