Оптимизация производительности React - memo, useMemo, useCallback

Является ли ожидание снижения производительности хорошим способом оптимизации компонентов? Мы проектируем наши дороги и автомагистрали так, чтобы они «просто работали», не принимая во внимание транспортный поток? Конечно, нет! Вместо того, чтобы ждать, пока производительность станет проблемой, чтобы начать использовать или изучать методы оптимизации, начните использовать их при написании своих компонентов.

memo

Из трех методов мемоизации, memo, возможно, является самым трудным для осмысления и понимания и, возможно, самым важным. Проще говоря, memo по умолчанию предотвратит повторный рендеринг компонента. Он будет перерисовывать компонент только в том случае, если внутреннее состояние или проп изменяются. Сравнение происходит поверхностно. Рассмотрим такой пример.

import React, { useState } from 'react';

const Text = ({ text }) => {
  return <p >{text}</p>
};

const ParentComponent = () => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  
  return (
    <>
      <input onChange={(e) => setFirstName(e.target.value)} />
      <input onChange={(e) => setLastName(e.target.value)} />

      <Text text='Your name is:' />
      <Text text={firstName} />
      <Text text={lastName} />
    </>
  );
};

По умолчанию всякий раз, когда ParentComponent обновляется, он перерисовывает все 3 текстовых компонента. Подумайте, сколько символов пользователь может ввести в каждый из этих инпутов. Каждый раз, когда значение меняется, Text каждый раз перерисовывается. Хотя это простой пример, легко увидеть, как это может стать более серьезной проблемой производительности, учитывая более крупные компоненты, которые отображают множество дочерних компонентов. Давайте посмотрим, как мы можем использовать memo для оптимизации этого компонента и предотвращения повторного рендеринга всего по умолчанию.

import React, { useState, memo } from 'react';

// Компонент обернут в memo
const Text = memo(({ text }) => {
  return <p >{text}</p>
});

const ParentComponent = () => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  
  return (
    <>
      <input onChange={(e) => setFirstName(e.target.value)} />
      <input onChange={(e) => setLastName(e.target.value)} />

      <Text text='Your name is:' />
      <Text text={firstName} />
      <Text text={lastName} />
    </>
  );
};

Теперь всякий раз, когда значение firstName или lastName изменяет значение, он будет обновлять только соответствующий Text, связанный с ним. Оборачивание Text в memo говорит Text ререндериться только тогда, когда один из его пропсов изменяется. Если мы будем менять input, связанный с firstName, обновится только второй Text (<Text text={firstName} />). Решая, обновлять или нет, Text сравнивает текущее значение пропса text с новым значением, и если они совпадут, компонент не обновится. Первый и третий Text увидят, что их пропсы не поменяли своих значений, и решат, что рендериться не надо.

При сравнении пропсов, чтобы определить, должен ли компонент обновляться, memo поверхностно сравнивает пропсы. Это достигается за счет перебора ключей сравниваемых объектов и возврата значения true, когда значения ключа в каждом объекте не строго равны. Это определение может сбивать с толку, поэтому можно думать о нем с точки зрения равенства JS. Можно представить поверхностное сравнение, как строгое сравнении JS (===) для каждого prevProp и каждого newProp. Если все возвращают true, повторный рендеринг не запускается, если все возвращают false, то рендеринг запускается. Т.е. значения типов boolean, string, number, undefined, null будут приводить к ререндеру при изменении их значения. Значения типов array, object, function будут вызывать повторную визуализацию КАЖДЫЙ раз, потому что их равенство объектов всегда будет возвращать false. Потому что они сравниваются по ссылке. В этот момент вам может быть интересно, как можно мемоизировать компонент с пропсами в виде массива, объекта или функции. Рассмотрим useMemo и useCallback.

useMemo

useMemo может помочь вам оптимизировать функциональные компоненты, не пересчитывая значение переменной при каждом рендеринге. Он принимает список зависимостей в качестве аргумента, и когда он изменяется, он пересчитывает значение. Рассмотрим такой компонент:

// Пример без использования useMemo

import React from "react";

const ComponentThatRendersOften = ({ prop1, prop2 }) => {
  const array = [prop1];

  return (
    <MemoizedComponent prop={array} />
  );
};

Каждый раз, когда этот компонент перерисовывается, массив будет создаваться заново. Несмотря на то, что MemoizedComponent запоминается, он все равно будет перерисовываться каждый раз, когда рендерится ComponentThatRendersOften. Переменная массива будет воссоздаваться при каждом рендеринге, и, поскольку поверхностное сравнение пропсов определяет повторный рендеринг, он будет каждый раз перерисовываться. Однако мы хотим перерисовывать только при изменении prop1 (массив зависит только от prop1). Давайте посмотрим, как мы можем использовать useMemo для пересчета значения только при изменении пропса prop1.

// Пример с useMemo

import React, { useMemo } from "react";

const ComponentThatRendersOften = ({ prop1, prop2 }) => {
  const array = useMemo(() => {
    return ([prop1]);
  }, [prop1]);

  return (
    <MemoizedComponent prop={array} />
  );
};

Теперь array будет пересчитываться только при изменении prop1. Если бы только prop2 обновлял и вызывал повторный рендеринг, array использовал бы свое последнее вычисленное значение, а не пересчитывался заново. Он будет пересчитан только при изменении prop1. useMemo имеет 2 аргумента:

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

Массив в конце useMemo, [prop1] — это то, как мы сообщаем ему, чтобы он перезапускал вычисления только при изменении prop1. Если бы мы хотели запустить его при изменении prop2, это выглядело бы как [prop1, prop2] . Если бы мы хотели, чтобы он вычислялся только при начальном монтировании, это выглядело бы как []. useMemo может предложить значительное повышение производительности для функциональных компонентов, которые имеют сложные вычисления значений и часто перерисовываются.

useCallback

useCallback концептуально схож с useMemo. Единственное отличие состоит в том, что вместо того, чтобы запоминать значение, useCallback запоминает функцию. Рассмотрим пример.

import React, { useState } from 'react';

const ComponentThatRendersOften = ({ cb1, cb2 }) => {
  const [state, setState] = useState(...);
  const func = () => {
    setState(...);
    cb1();
  };

  return (
    <MemoizedComponent onClick={func} />
  );
};

Как и в примере с useMemo, каждый раз, когда этот компонент выполняет повторный рендеринг, он будет воссоздавать функцию. Несмотря на то, что MemoizedComponent запоминается, он все равно будет перерисовываться каждый раз, когда ComponentThatRendersOften рендерится, потому что func пересоздаются. Мы могли бы переместить эту функцию за пределы области действия компонента, чтобы не перерисовывать его каждый раз, но тогда мы будем передавать пропсы, локальные переменные и установщики состояния. Это было бы невероятно раздражающим при большом количестве переменных, и это ухудшает читабельность. Давайте мемоизируем эту функцию с помощью useCallback, чтобы воссоздавать эту функцию только при изменении пропса cb1.

import React, { useState, useCallback } from 'react';

const ComponentThatRendersOften = ({ cb1, cb2 }) => {
  const [state, setState] = useState(...);

  const func = useCallback(() => {
    setState(...);
    cb1();
  }, [cb1, setState]);
  return (
    <MemoizedComponent onClick={func} />
  );
};

Теперь этот компонент будет пересоздавать func только при изменении cb1. useCallback имеет 2 аргумента:

• функция обратного вызова, которая запоминается и возвращается
• массив зависимостей, которые сообщают useCallback, когда следует воссоздать функцию.

Так же, как и useMemo, массив в конце useCallback - [cb1]) - это то, как мы сообщаем ему воссоздавать функцию только тогда, когда cb1 меняет значение. Если бы мы хотели запустить его, когда cb2 и state также изменились, это выглядело бы как [cb1, cb2, state]. Если бы мы хотели, чтобы он вычислялся только при начальном монтировании, это выглядело бы как [].

Когда и что использовать

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

memo

Что оно делает: Обертывает функциональный компонент, перерисовывая компонент только тогда, когда проп или состояние «поверхностно» изменились. Когда его использовать:

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

Когда не использовать:

• Чтобы обернуть классовый компоненты (для классовых компонентов используется PureComponent).
• Компонент небольшой или находится ниже в React дереве.
• Компонент не имеет заметно низкой производительности.

useMemo

Что оно делает: Запоминает значение, которое будет пересчитываться только при изменении одной из его зависимостей. Когда его использовать:

• Вы передаете переменную в мемоизированный компонент, при этом тип переменной не относится к типу boolean, string, number, undefined, null. Чаще всего оборачивает массивы и объекты.
• Только внутри функциональных компонентов

Когда не использовать:

• Вы передаете переменную в мемоизированный компонент, который возвращает true со строгим равенством JS (===).
• В классовых компонентах.

useCallback

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

• Вы передаете локально объявленную функцию в мемоизированный компонент или другой массив мемоизированных зависимостей.
• Компонент - функциональный

Когда не использовать:

• У вас есть функция, которая не передается в мемоизированный компонент.
• Вы можете легко переместить свою функцию за пределы компонента (очень простые аргументы функции).

Итоги

Использование этих трех методов мемоизации не только поможет вам создавать более быстрые и оптимизированные React приложения, но и поднимет ваши навыки работы с React на новый уровень. Поиск возможностей для оптимизации — это то, что отличает Senor React разработчиков от Middle или Junior.

Введение

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

Почему это важно

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

React Query

Проще говоря, React Query делает получение данных в React намного удобнее. Но это не библиотека для получения данных как таковая. Вместо этого это библиотека управления состоянием, которая имеет дело с асинхронным состоянием сервера. Вы предоставляете ей асинхронную функцию, которая затем извлекает данные. useQuery предоставляет вам кучу полезных утилит для обработки асинхронной функции:

• Флаг состояния загрузки
• Кэширование результатов
• Инвалидация и повторный запрос данных

Список небольшой. Но влияние, которое он оказывает на большие кодовые базы, нельзя недооценивать. Как правило, кодовые базы имеют много логики для глобального обмена результатами выборки, их обновления при изменении данных, триггеров для получения данных и многого другого. Большая часть этого просто больше не нужна при использовании React Query. Кэширование означает, что вы можете вызвать хук useQuery по всему приложению, и данные будут совместно использоваться. https://github.com/TanStack/query

Zustand

Каждый React разработчик знает, как сложно шэрить состояние в приложении. При первом столкновении с проблемой вы неизбежно заканчиваете «просверливанием» данных по дереву компонентов (prop drilling). Излишне говорить, что это не делает код чистым и не является устойчивым в долгосрочной перспективе. К счастью, React придумал контекст для решения этой проблемы. Контекст отлично подходит, если все, что вам нужно сделать, это передать несколько значений вниз по дереву компонентов. Но он может стать громоздким для использования в более сложных глобальных сторах. Разработчики должны быть осторожны с последствиями для производительности, и некоторые разработчики не являются большими поклонниками Context API. Zustand предлагает чрезвычайно простой API, который позволяет создавать хранилище со значениями и функциями. Затем вы можете получить доступ к этому хранилищу из любого места в приложении для чтения и записи значений. Реактивность включена. Если вы хотите хранить данные вложенных объектов в своем хранилище, рассмотрите возможность использования Immer вместе с Zustand, чтобы легко изменить вложенное состояние. https://github.com/pmndrs/zustand

Framer Motion

Анимация — один из лучших способов придать вашему React приложению современный вид. Но это непросто. Использование CSS анимации сложно и может привести к большому количеству кода. Напротив, Framer Motion предлагает мощный, но простой API для создания пользовательских анимаций. Он изначально интегрирован в экосистему React с набором хуков и компонентов. Например, этот код - все, что требуется для плавной анимации преобразования из круга в квадрат:

import { motion } from "framer-motion"

export const MyComponent = () => (
  <motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],
      borderRadius: ["20%", "20%", "50%", "50%", "20%"],
    }}
  />
)

Каждое значение в массиве представляет ключевой кадр для соответствующего свойства. Затем анимация проходит через этот цикл. Конечно, вы можете сделать гораздо больше, чем просто определить ключевые кадры с помощью Framer Motion. Вы также можете анимировать изменения в макете, обрабатывать жесты или анимировать на основе прокрутки. https://github.com/framer/motion

Class Variance Authority (CVA)

TailwindCSS быстро превратился в основной способ стилизации приложений React. Но создание многоразовых элементов пользовательского интерфейса с его помощью может быть сложной задачей. Допустим, вы создаете свою собственную кнопку с помощью Tailwind. Так как вы хотите повторно использовать его во всем своем приложении, вы создаете компонент. Но теперь вам нужно несколько вариантов этого компонента. Основной стиль и дополнительный стиль. Итак, теперь вам нужно собрать классы Tailwind вместе в соответствии со значением пропса. Теперь вам также нужны разные цвета и разные размеры для вашей кнопки. Так что добавьте немного пропса и еще больше условной логики, чтобы выяснить правильную комбинацию классов Tailwind. Это может увеличить кодовую базу и усложнить понимание. CVA, сокращение от Class Variance Authority. Это простая библиотека, которая избавляет от необходимости создавать компонуемые компоненты React с именами классов Tailwind. Возьмем этот пример из их документации:

import React from "react";
import { cva, type VariantProps } from "class-variance-authority";

const button = cva("button", {
  variants: {
    intent: {
      primary: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600",
      ],
      secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof button> {}

export const Button: React.FC<ButtonProps> = ({
  className,
  intent,
  size,
  ...props
}) => <button className={button({ intent, size, className })} {...props} />;

Мы декларативно описываем стили кнопок для каждого значения параметра. Затем CVA выполняет работу по выяснению правильной комбинации стилей. Мы даже можем указать варианты по умолчанию, чтобы сделать определенные свойства необязательными. https://github.com/joe-bell/cva

Radix UI

Если вам нравится создавать полностью кастомизированные пользовательские интерфейсы, но вы не хотите разбираться в тонкостях разработки высококачественных доступных компонентов пользовательского интерфейса с нуля, Radix UI для вас. Библиотека поставляется с различными часто используемыми компонентами пользовательского интерфейса. Например, диалоговые окна, чекбоксы и раскрывающиеся списки. Но с изюминкой. Хотя компоненты содержат всю логику и интерактивность, они не имеют стиля. Это означает, что у вас есть полный контроль над стилизацией компонентов самостоятельно. Это позволяет вам создать действительно настраиваемую систему пользовательского интерфейса, которая не похожа на любой другой веб-сайт. Имея полный контроль над стилем, Radix делает всю остальную работу за вас. Все компоненты полностью доступны - скажем, через навигацию с помощью клавиатуры. Если вам нравится гибкость Radix, но вы не хотите стилизовать все с нуля, вам стоит попробовать shadcn/ui. Это полностью модульная библиотека компонентов, построенная на основе Radix и Tailwind. Вместо того, чтобы устанавливать пакет NPM, вы можете скопировать код непосредственно в свой проект и изменить его по своему вкусу. https://github.com/radix-ui/primitives

Итоги

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