Infinite scroll (бесконечный скролл) +Virtualization (виртуализация) на примере ReactJS+ RTK Query

На сегодняшний день любое уважающее себя предприятие, будь то магазин строительных товаров или компания по предоставлению услуг в сфере бизнеса, все они стремятся «выложить» свои товары и услуги в интернет. Это и понятно – мы живем в век бурно развивающихся технологий и доступ в интернет имеет более 65% населения мира (около 5.3 млрд. человек), а к 2025 году это число увеличится до 6.54 млрд. (внушительно, не правда ли?). Так, о чем я, всех их нужно обслуживать, всем им нужно предлагать услуги, товары и т.д. Как говорится: «На вкус и цвет – товарища нет» и правда сколько людей – столько мнений, а в нашем случае товаров и услуг. На фоне этого возникает резонный вопрос: «А как все это отобразить у меня на сайте, чтобы пользователь не ждал до следующего года загрузки страницы сайта, когда к тому времени успеют появиться еще товары, которые необходимо будет подгрузить?». При такой картине мира и самых оптимистичных прогнозах о темпах появления новых вещей, мы имеем неосторожность войти в некую рекурсию.

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

✍️ @React_lib

TypeScript Handbook для React Developers – Создаем безопасное приложение Todo

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

https://www.freecodecamp.org/news/typescript-tutorial-for-react-developers/

✍️ @React_lib

Awesome React

Коллекция удивительных вещей, связанных с экосистемой React

React General Resources
React Tutorials
React Development Tools
React Frameworks
React Component Libraries
React State Management and Data Fetching
React Styling
React Routing
React Libraries
React Testing
React Awesome Components
React Components Sandboxes
React Forms
React Tables and Grids
React Maps
React Charts
React Renderers
React Internationalization
React Graphics and Animations
React Integration
React Real Apps
React Native General Resources
React Native Navigation
React Native Awesome Components
React Native Libraries

https://github.com/enaqx/awesome-react

✍️ @React_lib

Как загрузить файл в React

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

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

https://pragmaticpineapple.com/how-to-upload-file-in-react/

✍️ @React_lib

Девять порочных практик React. Разбираем частые ошибки

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

Rus https://habr.com/ru/companies/ncloudtech/articles/685400/

Eng https://cult.honeypot.io/reads/bad-react-habits-to-kick/

✍️ @React_lib

❌ Избегайте смешивания бизнес-логики с компонентами React.

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

✍️ @React_lib

Ответы в блоге: Мой опыт перехода пакетов на ESM

Последние 8 с лишним лет экосистема JS медленно переходила к использованию ES-модулей ("ESM") в качестве стандартного подхода для публикации и использования JS-кода. Подобно переходу Python 2->3, это было невероятно сложно и болезненно.

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

В начале этого года я начал работать над тем, чтобы обновить форматирование пакетов для библиотек семейства Redux, чтобы обеспечить им "полную совместимость с ESM". Кажется, я наконец-то придумал набор конфигураций, которые, похоже, работают достаточно хорошо, но это было нелегко.

https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/

✍️ @React_lib

Построение системы дизайна с помощью веб-компонентов React

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

https://www.voorhoede.nl/en/blog/building-design-system-react-web-components/

✍️ @React_lib

Что такое react-afc

react-afc - библиотека для более простого (чем в простом react) уменьшения количества ненужных ререндеров дочерних компонентов.

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

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

✍️ @React_lib

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