5 способов избежать повторного рендеринга компонентов React

5 способов избежать повторного рендеринга компонентов React

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

1. Мемоизация с использованием хуков useMemo() и UseCallback()

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

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

useMemo()

Чтобы понять, как мы можем использовать хук useMemo(), давайте рассмотрим пример умножения двух чисел.

Вышеупомянутая функция будет вычислять результат и повторно отображать компонент каждый раз, когда она вызывается, независимо от входных данных. Но, если мы используем хук useMemo(), мы можем избежать повторного рендеринга компонента, если входные данные одинаковы, и сохранить результат в кеше.

Теперь вычисленный результат сохраняется в переменной cachedValue, и хук useMemo() будет возвращать его каждый раз, если входные данные не изменились.

UseCallback()

UseCallback() — еще один React Hook для реализации мемоизации. Но, в отличие от useMemo(), он не кэширует результат. Вместо этого он запоминает предоставленную ему функцию обратного вызова. Например, рассмотрим компонент со списком кликабельных элементов.

В приведенном выше примере useCallBack() запоминает обратный вызов onClick. Таким образом, он не будет повторно отображать компонент, если пользователь снова и снова кликает на один и тот же элемент.

2. Оптимизация вызовов API с помощью React Query

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

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

Библиотека React Query имеет более 600 тысяч загрузок NPM в неделю и более 1,3 тысячи звезд GitHub.

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

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

Селекторы повторного выбора способны вычислять производные данные.

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

Их можно использовать в качестве входных данных для других селекторов.

Reselect предоставляет API под названием createSelector и может генерировать мемоизированные функции секторов. Для лучшего понимания рассмотрим пример, приведенный ниже.

Здесь createSelector принимает на вход 2 селектора и возвращает мемоизированную версию. Селекторы не будут вычисляться снова с этой мемоизированной версией, пока значения не будут изменены.

Библиотека Reselect имеет более 2 миллионов еженедельных загрузок NPM и более 18,4 тыс. звезд GitHub.

4. Замена useState() на useRef()

Хук useState() широко используется в приложениях React для повторного рендеринга компонентов при изменении состояния. Однако есть сценарии, в которых нам нужно отслеживать изменения состояния без повторного рендеринга компонентов.

Если мы воспользуемся хуком useRef(), то сможем отслеживать изменения состояния, не вызывая повторного рендеринга компонентов.

В приведенном выше примере есть переключатель, который повторно отображает компонент каждый раз, когда значение изменяется. Но counter сохраняет свое значение, так как это изменяемая ссылка. Поскольку мы используем useRef(), это вызовет только один рендеринг. Однако, если мы используем useState(), это вызовет 2 рендеринга при каждом переключении.

5. Использование React Fragments

Если вы раньше работали с React, то знаете, что React требует оборачивать компоненты одним родительским элементом. Хотя это не касается непосредственно повторного рендеринга, знаете ли вы, что это влияет на общее время рендеринга компонента?

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

Заключение

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

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

Автор: Chameera Dulanga

Источник: blog.bitsrc.io

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии запрещены.