Борьба с перерендерами в React

На тему мемоизации написано много статей, и все они хорошо раскрывают суть. Но если вам, как и автору этой статье, не хватало шпаргалки, которую можно отправить на вопрос «А как мемоизировать?», то вы по адресу.

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

#react

Как создать мини-приложение в Telegram

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

Вы сможете создать простой кликер с таблицей лидеров. В основе будет React и Nest.js. Подробности по ссылке.

#telegram #бэкенд #фронтенд #react #nestjs

ReactJS на изи: что реально нужно знать фронтенд-разработчику в 2025 году

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

#react

Создаём полноценное приложение для книжного магазина с React, Node и MongoDB

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

Видео на английском, но в браузере можно посмотреть с субтитрами или нейропереводом, для этого ловите ссылку: https://youtu.be/pgw2KPfgK1E

#видео #курс #фуллстэк #react #nodejs

Современный Drag and Drop в React с помощью dndkit: создаем перетаскиваемое меню

DnD Kit — это удобная библиотека для создания функциональности drag-n-drop в React-приложениях. У нас на сайте появилась статья, в которой на понятных примерах показаны ключевые возможности библиотеки.

#react #dragndrop

Как упростить работу с React при помощи useLoaderData

Традиционный подход с использованием useState и useEffect для получения данных в React часто приводит к проблемам. Загвоздка заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению.

Вместо этого можно использовать хук useLoaderData из React Router. Он позволяет вынести логику загрузки данных в отдельную функцию-загрузчик. Это упрощает код, позволяет отделить логику загрузки от отображения и избавляет от необходимости отслеживать состояние загрузки.

Подробнее о том, как настроить useLoaderData: https://nuancesprog.ru/p/18962/

#react

React vs Jmix: что выбрать для бизнес-приложений?

Разработка UI для бизнес-приложений — задача не из лёгких. React предлагает гибкость и широкую экосистему, но требует интеграции сторонних библиотек для полной функциональности. С другой стороны, Jmix предоставляет комплексное решение с готовыми инструментами для быстрой разработки, включая поддержку Kotlin и дизайн-тайм ролей. Однако выбор между ними зависит от специфики проекта и предпочтений команды. Подробнее о сравнении этих фреймворков читайте в статье.

#react #jmix

Лучшие практики по работе с Context API в React приложении

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

Подробнее в видео: https://youtu.be/zmAL9revylc

#видео #react

Какие есть паттерны в React и для чего они нужны

За годы разработки вокруг React сформировались свои распространённые паттерны — способы организовать компоненты и логику так, чтобы код получался понятным, поддерживаемым и переиспользуемым.

В этой статье Юсуп Изрипов, разработчик в VK, расскажет о нескольких полезных паттернах в React. Здесь про Container & Presentational Components, Higher-Order Component (HOC) и паттерн Render Props.

#react #паттерны

Old but gold: Визуальное руководство по рендерингу React

Хотите понять как работает рендеринг в React и своими глазами увидеть процесс? Что ж, эта статья для вас.

Здесь вы узнаете, как работает повторный рендеринг и как его избежать: https://alexsidorenko.com/blog/react-render-always-rerenders/

#react

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

По мере усложнения UI-элементов React сложная логика может переплетаться с визуальным представлением. Из-за этого становится сложнее понять поведение компонента, тестировать его, а также создавать аналогичные компоненты, которым нужен другой внешний вид. Headless компонент извлекает всю невизуальную логику и управление состоянием, отделяя «мозг» компонента от его внешнего вида.

Подробнее об этом подходе в статье: https://martinfowler.com/articles/headless-component.html

#react

​Как использовать React в приложениях Angular

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

О том, как это сделать:

https://nuancesprog.ru/p/16840/

#react #angular

GraphQL на практике: создаём реальный чат с Apollo Server и React

Практический проект: создаём чат-приложение с помощью GraphQL, Apollo Server, WebSocket и React. Полный цикл — от бекенда до фронтенда, в реальном боевом примере.

Если вам, конечно, не лень этим заниматься на майских😅

#graphql@tproger_web #react@tproger_web

Old but gold: ​Как ускорить таблицу на React в 1000 раз, изменив одну строку

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

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

#react

Переезд с Webpack на Vite: как ускорить React-проект и упростить сборку

Если сборка проекта на Webpack занимает вечность, а конфигурации становятся всё сложнее, возможно, пора взглянуть в сторону Vite. Этот инструмент предлагает молниеносную сборку, встроенный HMR и простую настройку. В статье описан реальный опыт перехода с Webpack и react-scripts на Vite, включая решение проблем с FontAwesome, настройку прокси и корректное размещение index.html.

И все-таки, Vite или Webpack?

❤️- Vite
🔥- webpack

#фронтенд #react #vite

React 19 — новые хуки за 15 минут

Владилен Минин коротко демонстрирует useActionState, useOptimistic и улучшенный useDeferredValue, чтобы вы поняли, как ускорить UI без лишних перерендеров.

#react@tproger_web

Compound Component: избавляемся от props-drilling и получаем гибкий API

«Составной компонент» — паттерн, в котором родитель хранит состояние, а дочерние элементы свободно комбинируются без явной передачи пропов. В материале показан путь от обычного аккордеона с длинным списком props к контекст-ориентированной версии, где порядок и число подпроектов не ограничены. Плюсы, минусы, подводные камни — всё разобрано на живых примерах.

#фронтенд #react

Web API, которые функционально приближают веб-приложения к нативным

Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.

В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/

#javascript #api #react

RTK Query + OpenAPI: автоматически генерируем типобезопасные API-хуки для React

Забываем про ручные fetch и бесконечные типы — берём спецификацию OpenAPI, прогоняем через openapi-typescript-codegen, подключаем к RTK Query и сразу получаем готовые хуки: useGetPetsQuery, useCreatePetMutation и другие.

Полный путь показан в статье: настройка генератора, создание базового api, интеграция в Redux store и примеры рефакторинга, где количество кода сокращается в разы.

#фронтенд #react #api

Революция в условном рендеринге React

Если вам надоело писать if, && и ? : в каждом React-компоненте, эта статья — находка. Здесь показано, как использовать декларативные абстракции (<Show>, <Switch>, <Match>) в React, вдохновившись стилем SolidJS, чтобы сделать условный рендер читаемым и масштабируемым. А ещё — как эти паттерны можно адаптировать под ваш собственный фреймворк.

#react