Как использовать React.memo() для предотвращения ненужных переоценок

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

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

Чтобы использовать React.memo(), вам просто нужно обернуть ваш компонент в функцию React.memo(). Например, следующий код определяет компонент, который отображает сообщение:

const Message = ({ message }) => {
  return <p>{message}</p>;
};

export default React.memo(Message);

В этом примере компонент Message принимает один реквизит с именем message. Функция React.memo() будет повторно отображать компонент Message только в том случае, если изменится свойство message.

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

const App = () => {
  const [message, setMessage] = useState("Hello, world!");

  return (
    <div>
      <Message message={message} />
      <button onClick={() => setMessage("Goodbye, world!")}>
        Toggle message
      </button>
    </div>
  );
};

export default React.memo(App);

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

Вот некоторые вещи, о которых следует помнить при использовании React.memo():

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