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

1. Использование средств повышения производительности браузера
2. Использование React.Suspense и React.Lazy для компонентов с lazy loading
3. Мемоизация компонентов React с помощью Memo
4. Tree-shaking
5. Оптимизация изображений

https://dev.to/devland/how-to-optimize-your-react-apps-performance-1045

✍️ @React_lib

Прекратите использовать UseMemo немедленно!

Чрезмерная оптимизация в React-приложениях - это настоящий кошмар. Каждый день мы сталкиваемся с тоннами бесполезных оптимизаций, призванных сделать код более "загадочным". Некоторые разработчики даже включают useMemo и useCallback в руководство по стилю по умолчанию, просто чтобы упростить ситуацию. Не впадайте в это забвение, поскольку useMemo может даже замедлить работу вашего приложения! Помните, что мемоизация не достается бесплатно.

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

https://javascript.plainenglish.io/stop-using-usememo-now-e5d07d2bbf70

✍️ @React_lib

Beginning React and Firebase: Create Four Beginner-Friendly Projects Using React and Firebase
Автор: Nabendu Biswas (2021)

Вы начнете с основ: научитесь развертывать приложение React на хостинге Firebase. Затем вы научитесь создавать полнофункциональное приложение "ToDo", которое будет использовать базу данных Firebase для хранения списка элементов действий. Также вы научитесь создавать приложение "Stories", в котором можно показывать короткие вертикальные видеоролики, и приложение для хранения документов. Здесь мы сможем войти в систему, используя аутентификацию Google, и научимся хранить файлы в приложении с помощью хранилища Firebase. Наконец, вы создадите приложение для социальных сетей, посвященных карьере. Ваши пользователи смогут входить в систему, используя аутентификацию по электронной почте и паролю. В этом проекте вы научитесь использовать Redux.

✍️ @React_lib

Как освоить React.memo() для достижения оптимальной производительности: Советы и рекомендации

React.memo() - это компонент высшего порядка (HOC) в React, который может использоваться для оптимизации функциональных компонентов. Цель мемоизации - сократить количество ненужных повторных рендеров компонентов и повысить производительность React-приложения.

Мемоизация работает за счет кэширования результата работы метода рендеринга компонента и его повторного использования при повторном рендеринге компонента с теми же реквизитами. React.memo() предоставляет возможность мемоизации функциональных компонентов, сравнивая их реквизиты для определения необходимости повторного рендеринга.

Использование React.memo() позволяет избежать повторного отображения компонентов, которые не изменились, что может снизить нагрузку на приложение и повысить его производительность.

https://howtocrackit.com/mastering-react-memo-for-optimal-performance-tips-and-tricks/

✍️ @React_lib

Перевод приложения React с помощью Format.js

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

https://blog.logrocket.com/translate-react-app-using-format-js/

✍️ @React_lib

Повышение эффективности обработки форм с помощью React Hook Form - полное руководство

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

https://howtocrackit.com/boost-your-form-handling-with-react-hook-form-the-ultimate-guide/

✍️ @React_lib

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

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

✍️ @React_lib

Полноценный современный разработчик React

Это будет курс, позволяющий стать полноценным современным разработчиком React. Единственные три темы, которые не рассматриваются в этом курсе, - это Redux, GraphQL и React Native, которые могут быть рассмотрены в будущем курсе. Основным языком программирования будет TypeScript, однако если вы уже знаете JavaScript, то вам будет довольно легко его понять, поскольку синтаксис не сильно отличается.

Мы создадим базовый клон Twitter, который будет иметь CRUD-функции для публикации, чтения и удаления твитов.

Этот курс даст вам навыки и знания, необходимые для того, чтобы стать разработчиком программного обеспечения во всем стеке. В этом курсе вы узнаете:
Node.js (express.js and nest.js)
MongoDB and PostgreSQL
Docker
TypeScript
React (Hooks and Context API)
Storybook.js
Jest, React Testing Library, and Cypress (Unit Testing, Integration Testing, End to End Testing)

https://dev.to/andrewbaisden/the-complete-modern-react-developer-2022-3257

✍️ @React_lib

Реализация контроля доступа в приложениях React: Полное руководство

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

https://javascript.plainenglish.io/implementing-access-control-in-react-apps-a-complete-guide-507c375fe7cb

✍️ @React_lib

Как использовать MVVM в React с помощью хуков и TypeScript

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

В этой статье мы рассмотрим, как можно спроектировать React-приложение в соответствии с архитектурным паттерном MVVM, чтобы создать масштабируемое и поддерживаемое React-приложение. Мы будем использовать TypeScript и функциональные компоненты React, а также напишем пользовательские хуки для ViewModel и Model. Этот же код, конечно, будет работать и в React Native с небольшими изменениями.

Если при чтении статьи у вас возникнут вопросы, в конце статьи вы найдете обширный FAQ.

https://dev.to/perssondennis/how-to-use-mvvm-in-react-using-hooks-and-typescript-3o4m

✍️ @React_lib

Структура приложения React.js - лучшие практики

В этой статье рассматриваются лучшие практики структурирования приложений React.js с упором на три основных подхода: Группировка по признакам, Группировка по типу файлов и гибридный подход. В руководстве также рассказывается о том, как интегрировать в структуру приложения современные возможности React, такие как Redux, Hooks, Stateful Container Components, Context API, Testing libraries и Styled-компоненты.

https://www.dotnetcurry.com/reactjs/folder-structure-for-reactjs

✍️ @React_lib

Mastering Zustand: Простая и эффективная библиотека управления состояниями для React

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

https://www.freecodecamp.org/news/zustand-course-react-state-management/

✍️ @React_lib

Как развернуть приложение React с помощью PM2 и Serve

Да, вы изучили React и теперь можете разрабатывать полноценные фронтенд-приложения.

С помощью create-react-app можно настроить и запустить проект React, включая транспиляцию кода, базовую линтинг-систему, тестирование и систему сборки.

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

https://compile7.org/decompile/react-app-deployment/

✍️ @React_lib

Learning React
Modern Patterns for Developing React Apps 2nd Edition
Alex Banks, Eve Porcello (2020)

Хотите создавать эффективные приложения с помощью React? Тогда эта книга написана для вас. Познакомьтесь c лучшими практиками и шаблонами создания современного кода.

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

✍️ @React_lib

React: полное руководство по повторному рендерингу

https://www.developerway.com/posts/react-re-renders-guide

✍️ @React_lib

Интерактивное руководство по рендерингу в React

В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.

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

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

https://ui.dev/why-react-renders

✍️ @React_lib

Tanstack: Как добавить таблицы в приложение React

Таблица Tanstack - это рабочая лошадка, созданная для фильтрации, сортировки, группировки, агрегации, пагинации, материализации и отображения массивных наборов данных. Он предлагает множество улучшенных возможностей, таких как производительность, поддержка рендеринга на стороне сервера (SSR), новые крючки и более современный, гибкий API. Безголовый дизайн не поставляется с компонентами и стилями разметки, что дает нам полный контроль над разметкой и стилями. В этой статье мы рассмотрим, как начать добавлять и стилизовать наши ReactJS-таблицы с помощью Tanstack Table. Итак, давайте погрузимся и посмотрим, что предлагает Tanstack Table!

https://blog.openreplay.com/tanstack--how-to-add-tables-to-your-react-app/

✍️ @React_lib

useSyncExternalStore - The underrated React API

https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api

✍️ @React_lib

Как я уменьшил размер образа Docker с 1,43 ГБ до 22,4 МБ

Если вы занимаетесь веб-разработкой, то, вероятно, уже знаете об идее контейнеризации и о том, как это здорово и все такое.

Но при работе с Docker размер образа вызывает серьезные опасения. Зачастую он превышает 1,43 ГБ только для шаблонного проекта, который мы получаем из create-react-app.

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

Трюки будут показаны для ReactJS, но они применимы к любому NodeJS-приложению.

https://dev.to/mohammadfaisal/how-i-reduced-docker-image-size-from-143-gb-to-224-mb-53nc

✍️ @React_lib

React: полное руководство по повторному рендерингу

Что такое ререндеринг?
Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React:

первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
ререндеринг — второй и последующие рендеринги компонента.

Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.

Rus https://habr.com/ru/companies/timeweb/articles/684718/

Eng https://www.developerway.com/posts/react-re-renders-guide

✍️ @React_lib