Ответ
В Redux мемоизация используется для оптимизации производительности, предотвращая лишние перерендеры. Основные способы:
reselect- библиотека для создания мемоизированных селекторов. Пример:
import { createSelector } from 'reselect';
const selectItems = state => state.items;
const selectFilter = state => state.filter;
export const selectFilteredItems = createSelector(
[selectItems, selectFilter],
(items, filter) => items.filter(item => item.includes(filter))
);- React.memo - для мемоизации компонентов:
const MemoizedComponent = React.memo(MyComponent);- useMemo/useCallback в React-компонентах:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);- Ручная мемоизация в редьюсерах через сравнение предыдущего и нового состояния.
Для сложных приложений лучше использовать reselect, так как он предоставляет композируемые селекторы с зависимостями.
Ответ 18+ 🔞
Слушай, а вот эта ваша мемоизация в Redux — это ж, блядь, как таблетка от головной боли, когда уже третий день бухаешь. Без неё — пиздец, всё тормозит и перерисовывается, как сумасшедшее. А с ней — красота, всё летает. Сейчас на пальцах, только не усни.
Вот смотри, основные способы, как эту магию провернуть:
reselect— это, сука, святая святых для селекторов. Библиотека такая. Берёшь свои куски из стейта, скрещиваешь их, и она запоминает результат. Пока входные данные не поменялись — на хуй ничего не пересчитывает. Гениально и просто.
import { createSelector } from 'reselect';
const selectItems = state => state.items; // Вытащили просто список
const selectFilter = state => state.filter; // Вытащили просто фильтр
// А вот тут магия! Скрестили их и создали умный селектор.
export const selectFilteredItems = createSelector(
[selectItems, selectFilter], // Следим за этими двумя
(items, filter) => items.filter(item => item.includes(filter)) // Считаем только если они реально изменились
);React.memo— это как сказать компоненту: «Чувак, не дергайся, если тебе пришли те же самые пропсы, что и в прошлый раз». Обернул и забыл.
const MemoizedComponent = React.memo(MyComponent); // Всё, теперь он умный и ленивый.useMemo/useCallback— это уже для хуков. Когда внутри компонента нужно что-то тяжёлое посчитать или функцию запомнить, чтобы дитям не передавать новую ссылку на каждый чих.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); // Посчитает один раз, пока a и b те же
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]); // Запомнит функцию, пока a и b те же- Ручная мемоизация в редьюсерах — это для самых отчаянных. Сам, вручную, сравниваешь куски старого и нового стейта, и если нихуя не поменялось, возвращаешь старую ссылку. Муторно, но иногда надо.
А теперь, блядь, главный совет, чтоб тебе в рот чих-пых: для нормального, сложного приложения бери reselect. Он потому и стал стандартом де-факто, что селекторы можно как лего собирать, зависимости сам отслеживает, и голова не болит. Остальные способы — точечно, где надо. А так — reselect и вперёд, не еби мозг.