UseMemo behavior between components?

Question

React

In my component, I'm using useMemo to fire and cache a rather expensive request at browser runtime. So far, this has greatly reduced the time needed for subsequent renders.
However, the actual first render is still a problem. I've rendered thousands of instances of my component at the same time and it seems like the expensive request is being repeated unnecessarily. The same query result can be used for many of these instances as I only use two or three unique query inputs at a time. A query can be considered pure because it consistently returns the same result for the same inputs.
I'm left wishing that the remembered return value would be available to other instances of the same bean, but the profiling data suggests that's not the case.
Is there a clean and consistent way to ensure that the remembered result is shared across all calls to the same function, regardless of the original bean's instance?

Answer 1

The result of the useMemo calculation is tied to a particular instance of the component.
You have two options:
1. move the calculations up the tree.
2. use other tools for memorization.