8 лучших практик проектирования компонентов React.js

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

https://dev.to/blossom/8-best-practices-for-reactjs-component-design-4jn5

✍️ @React_lib

Используйте createStateContext для совместного использования хука useState

Несмотря на то, что многие превозносят UseContext в React как решение для управления состоянием, на самом деле он не имеет никакого отношения к управлению состоянием.

React Context - это инъекция зависимостей. Вы предоставляете значение компоненту-обертке, а затем любой последующий компонент может использовать это значение через хук useContext.

import React, { useContext } from "react"
export function createStateContext<T>() {
const StateContext = React.createContext<
| undefined
| Readonly<[T, React.Dispatch<React.SetStateAction<T>>]>
>(undefined)
function useStateContext() {
const tuple = useContext(StateContext)
if (tuple === undefined) {
throw new Error(
`use${StateContext.displayName} must be used within a ${StateContext.displayName}Provider`,
)
}
return tuple
}
return [StateContext, useStateContext] as const
}


https://www.jacobparis.com/content/use-state-context

✍️ @React_lib

React Suspense в трех различных архитектурах

React Suspense прошел странный путь: в течение многих лет он мало использовался и считался малопригодным, просто причудливым способом отображения состояния загрузки. Однако с недавним выходом React 18 Suspense предоставляет целый набор новых преимуществ, которые заслуживают того, чтобы взглянуть на них еще раз. К сожалению, эти преимущества могут варьироваться от неинтересных до эзотерических и существенно зависят от архитектуры вашего приложения. Давайте рассмотрим три наиболее распространенные на сегодняшний день архитектуры рендеринга и то, какую роль в них может сыграть React Suspense.

Client-side rendering: Показывайте фаллбэк во время загрузки React.lazy; декларативно обрабатывайте состояния загрузки/ошибок при получении данных с помощью suspense-совместимого фреймворка.

Server-side rendering: Все вышеперечисленное + серверные компоненты, обернутые в <Suspense />, выборочно гидрируются на клиенте.

Server components: Все вышеперечисленное + асинхронные серверные компоненты, обернутые в <Suspense />, передаются клиенту поэтапно: сначала это fallback, затем - финальный контент.

А теперь более глубокое погружение!

https://elanmed.dev/blog/suspense-in-different-architectures

✍️ @React_lib

React Quickly, 2nd Edition
Автор: Azat Mardan (2023)

Это практическое руководство по React для веб-разработчиков. Опираясь на более чем 100 тщательно подобранных и четко объясненных примеров, вы научитесь разрабатывать на React, используя уже имеющиеся у вас навыки работы с JavaScript и веб-разработки. Полностью переработанное второе издание содержит множество новых тем, включая главы, посвященные функциональным компонентам, генерации статических сайтов и CSS в JS. Кроме того, вам понравятся новые примеры проектов - от интерактивного меню до книжного интернет-магазина! Все примеры соответствуют лучшим практикам веб-доступности, чтобы сделать ваши приложения открытыми для всех.

✍️ @React_lib

⚛️ Я просмотрел бесчисленное количество PRs, и я вижу эту ошибку в React снова и снова.

❌ Объект ref не уведомляет об изменении значения ref в useEffect.

✅ Вместо этого используйте функцию обратного вызова ref, чтобы всегда получать последнее значение ref.

✍️ @React_lib

Любимая задачка на знание React

Всем привет! Меня зовут Олег и я fullstack-программист в компании Тензор. Опыт в разработке, без малого, 20 лет (как-то раз батя спаял на кухне ZX Spectrum и все заверте..., сам не понял как так вышло). В данный момент являюсь тимлидом собственной команды разработчиков, которая периодически нуждается в пополнении толковыми программистами.

Как и многие руководители, я активно принимаю участие в подборе сотрудников для себя и помогаю на собесах коллегам соседних отделов.

Наша команда занимается разработкой веб-приложения на React. Соответственно, мне важно найти программистов уверенно владеющих основами (!) этого фреймворка. Есть много способов проверки компетенций на собеседовании, один из любимых - задача по написанию hook для загрузки данных.

Если вы тоже в вечном поиске классных фронтендеров или сами часто проходите собесы - велком в эту статью :)

https://habr.com/ru/companies/tensor/articles/779718/

✍️ @React_lib

⚛️ Совет по React 💡

Ввод возвращаемых значений пользовательских хуков с помощью TypeScript

✍️ @React_lib

⚛️ Совет по React 💡

Напишите более качественное и безопасное условие с использованием сопоставления шаблонов

✍️ @React_lib

⚛️ Совет по React 💡

Как типизировать динамические компоненты (например, таблицы) с использованием TypeScript

✍️ @React_lib

UseMemo overdose

Недавно меня спросили, когда следует использовать хук useMemo, и этот вопрос заставил меня задуматься и поразмыслить. Постепенно я понял, что у меня появилась привычка использовать хук useMemo практически для всего, и я не мог объяснить, почему я это делаю. И особенно меня встревожило то, что после разговора с другим фронтенд-инженером я понял, что не только я так делаю. Это означает, что разработчики склонны чрезмерно использовать хук useMemo и даже не могут адекватно объяснить, почему они это делают. В этом посте мы узнаем, когда стоит использовать хук useMemo, а когда нет.

https://edvins.io/usememo-overdose

✍️ @React_lib

⚛️ Prop drilling в React затрудняет отладку и сопровождение кода

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

✍️ @React_lib

Как мы создали GPT-агента 🤖, который генерирует полнофункциональные веб-приложения на React и Node.js

Мы создали GPT Web App Generator, который позволяет кратко описать веб-приложение, которое вы хотите создать, и в считанные минуты прямо перед вами будет сгенерирована полностековая кодовая база, написанная на React, Node.js, Prisma и Wasp, которую можно загрузить и запустить локально!

Мы начали этот проект в качестве эксперимента, чтобы проверить, насколько хорошо мы можем использовать GPT для генерации полнофункциональных веб-приложений на Wasp, фреймворке JS для веб-приложений с открытым исходным кодом, который мы разрабатываем. С момента запуска мы сгенерировали более 3000 приложений всего за пару дней!

https://dev.to/wasp/how-we-built-a-gpt-code-agent-that-generates-full-stack-web-apps-in-react-nodejs-explained-simply-4f9

✍️ @React_lib

Создание компонента тоста

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

https://emilkowal.ski/ui/building-a-toast-component

✍️ @React_lib

Создание UI-компонентов React на продвинутом уровне

React  —  хорошая библиотека. Так давайте сделаем ее еще лучше, создавая многоразовые компоненты на высокопрофессиональном уровне.
Для использования этого руководства достаточно базовых знаний о React, TypeScript и Tailwind CSS.
В качестве примера поработаем с button, но принципы, которым будем следовать здесь, применимы к любому HTML-тегу.

const Button = ({children, className}) => {
return (
<button className={className}>{children}</button>
)
}

Приведенный выше код работает, но что, если понадобится ввести ARIA (accessible rich internet application attribute  —  доступные полнофункциональные интернет-приложения), ссылки или любые другие свойства обычного тега button?

https://medium.com/@emmanuelalozie69/build-react-ui-components-like-a-senior-developer-21c7b22408d2

✍️ @React_lib

Ускорить таблицу на React в 1 000 раз, изменив лишь одну строку

JP Camara, главный инженер Wealthbox, в своём блоге поделился интересным опытом ускорения TanStack Table — новой версии React-библиотеки для создания функциональных таблиц — аж до 10 мс.

https://habr.com/ru/companies/netologyru/articles/750246/

original https://jpcamara.com/2023/03/07/making-tanstack-table.html

✍️ @React_lib

⚛️ В React рендеринг больших списков или таблиц может снижать производительность

Как это исправить? Виртуализация! Процесс рендеринга только части большого набора данных (достаточно, чтобы заполнить область просмотра).

✅ Значительно улучшает время рендеринга.
✅ Снижается потребление памяти.

✍️ @React_lib

Делаем авторизацию через facebook

https://github.com/keppelen/react-facebook-login

✍️ @React_lib

Лучшие практики разработки сложных приложений на основе форм с помощью React Hook Form и поддержки TypeScript

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

https://orizens.com/blog/best_practices_for_developing_complex_form-based_apps_with_react_hook_form_and_typescript_support/

✍️ @React_lib

❌ Избегайте prop-drilling компонентов в React.

✅ Вместо этого используйте композицию

✍️ @React_lib

Test-Driven Development with React and TypeScript: Building Maintainable React Applications, 2nd Edition
Автор: Juntao Qiu (2023)

Применяйте принципы управления тестированием для создания
масштабируемых и поддерживаемых приложений React. В книге рассматривается широкий спектр вопросов, включая настройку среды тестирования и использование популярных фреймворков тестирования Cypress, Jest и библиотеки React Testing Library. Кроме того, в книге рассматриваются ценные приемы рефакторинга, а также повышение уровня сопровождаемости и читабельности кода. Эта книга повышает качество примеров кода за счет использования TypeScript, основного языка в современной фронтенд-разработке, что позволяет глубже понять, как принципы TDD могут быть применены к проектам на React.

✍️ @React_lib