Поведение useMemo между компонентами

Question

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

Однако фактический первый рендеринг все еще остается проблемой.Я рендерил тысячи экземпляров моего компонента одновременно, и кажется, что дорогой запрос повторяется без необходимости.Один и тот же результат запроса может быть использован для многих из этих экземпляров, поскольку я использую только два или три уникальных входа для запроса одновременно.Запрос можно считать чистым, поскольку он последовательно возвращает один и тот же результат для одних и тех же входных данных.

Мне хотелось бы, чтобы запомненное возвращаемое значение было доступно для других экземпляров того же компонента, но данные профилирования предполагаютчто это не так.

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

Answer 1

Состояние, поддерживаемое перехватчиками React, зависит от экземпляра компонента, в котором они вызываются.

Чтобы useMemo или useCallback имели общее состояние для нескольких экземпляров компонента, они должны возникатьв ближайшем общем родителе и при необходимости предоставляется контекстный API для глубоко вложенных дочерних элементов.

В случае, если он должен вести себя по-другому, следует использовать утилиту общего назначения для напоминания, такую ​​как Lodash memoize:

const expensiveFn = () => ...;

const memoizedExpensiveFn = _.memoize(expensiveFn);

Также позволяет контролировать кэш-память:

memoizedExpensiveFn.Cache = ES6MapWithExpiration;