1

I'm using React with hooks. I have an expensive function that I'd like to memoize.

I know React comes with useMemo(), but the values I need memoized are calculated once, each, on their first render. So there's no point to memoization within the first render, but memoization in future renders would be beneficial.

I've read the useMemo() documentation but it doesn't provide a firm answer So: do the values stored in useMemo() persist across re-renders of the component calling useMemo?

How can I persistently memoize across different renders of a React component?

Improve this question
12
  • sorry your use case is a little bit unclear, can you clarify? useMemo works across rerenders Commented Apr 9, 2021 at 20:56
  • Do different values need to be calculated for each component instance, or just once, ever? Commented Apr 9, 2021 at 20:59
  • @gmoniava I need to calculate a value, it is slow. Subsequent runs of the components function (I'm using hooks not classes) need to access the result of the calculation. Commented Apr 9, 2021 at 21:10
  • @CertainPerformance I don't think hook components have instances - they're just functions that are run, right? Commented Apr 9, 2021 at 21:10
  • Eg if you have <div><TheExpensiveComponent /><TheExpensiveComponent /></div>, would you need to run the calculation twice initially, or just once? Or is only one rendered at a given time? Commented Apr 9, 2021 at 21:11

2 Answers 2

Reset to default
2 
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Let's say above line of code is within ComponentA. Now, assuming that ComponentA hasn't been unmounted, then, memoizedValue persists across re renders given also that dependencies (a, b) don't change across re renders.

Also react docs say in the future react may decide to forget the memoized value sometimes so one should use it for optimization not as semantic guarantee.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

I guess the thing that's vague is - when is a React hook considered 'unmounted'? Doesn't react simply re-run the components function whenever it needs to? I want to persist the data across different runs of the component.
@mikemaccana Say you render ComponentA on one render, and next time you render null instead of it, that is one case when ComponentA is considered unmounted. Read more about reconciliation and React lifecycle.
Thanks @gmoniava! I have seen the reactjs.org/docs/reconciliation.html but the examples only use the class-based components, so I'm not sure how/if it applies to hooks.
@mikemaccana it also applies to hooks
I guess what I don't understand is - after a render, the hook component's function has returned. How could something stored in useMemo still persist after the function has returned? I understand closures, does React use them to keep references to the values stored by useMemo?
|
0

To do that you need use a way to store the value outside the component by example an Provider and Context. See the React oficial documentation to do that: https://reactjs.org/docs/context.html

My personal recommendation is use Redux for React. Here is your oficial documentation: https://redux.js.org/ This is very used for professional solutions that need store global state or data for your application.

You need to know that the useMemo is always connected to the component lifecycle.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.