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

1. Запоминание компонентов с помощью React.memo

Мемоизация позволяет пропустить повторную визуализацию, если реквизиты компонента не изменились. Однако React.memo легко использовать неправильно, не реализовав собственную функцию сравнения.

Неправильное использование:

const MemoizedComponent = React.memo(MyComponent);

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

Правильное использование:

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.itemId === nextProps.itemId;
});

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

2. Избегайте чрезмерного использования встроенных функций

Использование встроенных функций внутри JSX может привести к ненужным повторным рендерингам, поскольку React рассматривает новую функцию как новый реквизит при каждом рендеринге.

Неправильное использование:

function ButtonComponent() {
  return  handleClick()}>Click me;
}

Это приводит к тому, что handleClick воссоздается при каждом рендеринге, что приводит к ненужным повторным рендерингам.

Правильное использование:

import { useCallback } from 'react';

function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);

  return Click me;
}

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

3. Использование PureComponent

При работе с компонентами класса использование React.PureComponent гарантирует, что компонент перерисовывается только в случае изменения его свойств или состояния. Если вы используете React.Component, это может привести к ненужным повторным рендерингам.

Неправильное использование:

class CardComponent extends React.Component {
  // Component logic
}

Правильное использование:

class CardComponent extends React.PureComponent {
  // Component logic
}

Расширяя React.PureComponent, React будет поверхностно сравнивать реквизиты и состояние, избегая ненужных повторных рендерингов.

4. Оптимизация использования UseSelector в функциональных компонентах

При использовании useSelector из реакции-редукса важно выбрать только необходимый фрагмент состояния.

Неправильное использование:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

Это приведет к повторному рендерингу компонента при каждом изменении какой-либо части состояния.

Правильное использование:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const selectedData = useSelector((state) => state.specificSlice);
  // Render logic based on specific slice
};

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

5. Реализация mustComponentUpdate в компонентах класса

Для компонентов класса, которые не расширяют PureComponent, реализация mustComponentUpdate вручную позволяет более детально контролировать время повторной визуализации компонента.

Неправильное использование:

class ListItem extends React.Component {
  // Component logic
}

Это будет выполняться повторно каждый раз при рендеринге родительского компонента, даже если реквизиты и состояние не изменились.

Правильное использование:

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
  }

  // Component logic
}

Настраивая mustComponentUpdate, мы гарантируем, что компонент будет повторно отображаться только при изменении свойства itemId или состояния значения.

Заключение

Используя эти методы, вы можете значительно сократить ненужные повторные рендеринги в ваших приложениях React, что приведет к повышению производительности. Реализация мемоизации с помощью React.memo, использование PureComponent и тонкая настройка mustComponentUpdate — ключевые стратегии оптимизации ваших компонентов React.

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

Ссылки:

1. Гики для гиков. (2023). Что такое мемоизация в React?
2. Синхронизация. (2024). Мемоизация в React
3. Гиграф. (2024). Что такое React Memo и как его использовать?
4. Уточнить.dev. (2024). Руководство по React Memo с примерами

Если это руководство показалось вам полезным, поделитесь им с другими! ?

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

Цитаты:
[1] https://www.geeksforgeeks.org/what-is-memoization-in-react/
[2] https://stackoverflow.com/questions/74013864/why-arent-all-react-comComponents-wrapped-with-react-memo-by-default
[3] https://www.syncfusion.com/blogs/post/what-is-memoization-in-react
[4] https://hygraph.com/blog/react-memo
[5] https://refine.dev/blog/react-memo-guide/
[6] https://dmitripavlutin.com/use-react-memo-wisely/
[7] https://www.topcoder.com/thrive/articles/memoization-in-react-js
[8] https://react.dev/reference/react/memo