Sobes.tech
Middle+

Jaka jest różnica między useMemo a React.memo? Czy można sprawić, że komponent opakowany w React.memo nie będzie się ponownie renderował, nawet jeśli propsy się zmienią?

sobes.tech AI

Odpowiedź od AI

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

React.memo — это HOC (Higher Order Component), который мемоизирует сам компонент, предотвращая его повторный рендер, если пропсы не изменились по поверхностному сравнению.

Главное отличие:

  • useMemo мемоизирует значение внутри компонента.
  • React.memo мемоизирует сам компонент, контролируя его повторный рендер.

Можно заставить компонент, обёрнутый в React.memo, не перерендериваться даже при изменении пропсов, если передать вторым аргументом кастомную функцию сравнения (areEqual), которая возвращает true при любых изменениях, например:

const MyComponent = React.memo(
  function Component(props) {
    // ...
  },
  (prevProps, nextProps) => true // всегда считаем, что пропсы равны
);

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