useMemo, When and Why You Need It

Learn about what React's useMemo hook is and get some examples of the good, and bad, times to use it in your React 18, NextJS or Remix application.

#shorts

[coderlicious]

Jack, you have the best React channel. Thank you for your passion in this area.

[alonfai]

Another example for useMemo is in react context when you create the value prop, is better to wrap it in useMemo (e.g. object, useReducer output of state and dispatch data) to avoid re-render when this context is wrapped by other context providers that can get changed/re-render based on their logic

[tanzeelahmad]

best react channel on YT. How about a long video on these 2 hooks. Already learned a lot from you.

[josephnaru]

It's a great hook... at first for me was confusing, but once I used several times I understood the benefits on performance.

[engine_man]

My approach is if you’re passing the reference then memoise, if it’s just a primitive data type then use derived state.

[mileselam]

useMemo and useCallback are abstraction leaks to an inefficient architecture. Devs shouldn't have to fix the performance deficiencies of the library; they should be solving their own problems, not React's.

[mosescosme]

Could you go over when to useMemo/useCallback for an item in the dependency array of a useEffect hook? I'm still trying to understand that one.

[sunny]

Hi man, thank for you content. can you explain what should you do if array must be one of you dependencies in useMemo?

[rbereziuk]

About useMemo, a big mystery about using this hook is what we should call "expensive recalculations". How can we define this thing? Using a hook is not free. As I see in the source code useMemo consists of two other hooks and has a lot of logic under the hood. Not sure that sorting 100 names is slower (more expensive) than using the hook, running its underhood code, and allocating memory for the dependency array

[SanjuKumar-hkyy]

This man have lot of experience. I respect this man.

[omerbresinski]

On the last example, I would add that you should have the child components wrapped with React.memo in order to avoid the re-render. Great vid!

[dpaminer]

to control reference there is useRef hook

[thqkptc]

I would like to ask about the denpendency array, you say it will compare to it’s last version. I wonder it compare the value or compare the reference, If my dependency have a object, and I only change a prop inside that object, will those hooks recognize it as a change and update the function?

[tkzzthj]

How do I decide heavy or light calculation? In your video, when variable ‘names’ is large, you recommend useMemo. But how long is it? Thanks for good shorts!

[geld]

how about using useMemo in pagination props ?

[Nelsonm]

Is useMemo just as efficient as useEffect with a setState called inside of it? assuming dependency array has the same values

[lying]

It is better to wrap a large list of objects in memo in return() to avoid big calculations on every action

[gmssoberyahsharahla]

What about having arrays in the dependency array for the hook?

[codebycarlos]

In general, I tend to use useMemo for non-primitives and not for primitives (unless expensive to calculate)

[piyushaggarwal]

Hey Jack

I am never able to see the left side of the code on my phone. I think you are making this content for shorts only, please fit it somehow. I know you use less print width sometimes. But still the left side is cut out