memo и useMemo - это два разных инструмента в React для оптимизации производительности, но они решают разные задачи.

**React.memo() §

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

const MemoizedComponent = memo(MyComponent)

В этом примере, MemoizedComponent - это мемоизированная версия компонента MyComponent, которая будет перерендериваться только тогда, когда его пропсы изменятся.

Компонент MemoChild будет обновляться при каждом обновлении родителя. memo под капотом проверяет пропсы с помощью строгого равно, в нашем случае: prevProps.test === nextProps.test.

memo() vs. shouldComponentUpdate() §

memo() часто сравнивают с shouldComponentUpdate(), оба предотвращают лишнее обновление компонентов, но чтобы предотвратить обновление один возвращает true, другой false, как запомнить?

Поможет переводчик:

• shouldComponentUpdate - “должен ли компонент обновиться?”, если скажем да (вернем true) - обновится.
• propsAreEqual - “пропсы равны?”, если скажем да (вернем true) - не обновится, пропсы ведь равны.  Правда propsAreEqual это утверждение, а не вопрос и я бы назвал: arePropsEqual, но суть не меняется.

**useMemo() §

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

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

В этом примере, memoizedValue - это мемоизированное значение, которое будет пересоздаваться только тогда, когда изменятся зависимости a или b.

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

**Event switch vs. useMemo() §

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

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

Назад