panzerdp / dmitripavlutin.com-comments

7 stars 0 forks source link

react-usememo-hook/ #151

Open utterances-bot opened 2 years ago

utterances-bot commented 2 years ago

How to Memoize with React.useMemo()

How and when to use React.useMemo() hook to improve the performance of React components.

https://dmitripavlutin.com/react-usememo-hook/

WouterrV commented 2 years ago

Interesting, sounds very useful. But my first thought was, you could use useEffect with dependency array optimization to achieve the same effect, and then put the result in a useState.

panzerdp commented 2 years ago

Interesting, sounds very useful. But my first thought was, you could use useEffect with dependency array optimization to achieve the same effect, and then put the result in a useState.

Sure, there are many ways you could re-create the useMemo() logic.

NikosGkikas13 commented 2 years ago

awsome content as always, thank you very much

oktasense commented 2 years ago

Hello Dmitri!

Your content guides me with clarity when I need it. Thanks!

I have a large object that holds memoized objects as you see here:

const tableToolbarItems = { contract: **useMemo**( () => []), user: **useMemo**( () => []), items: **useMemo**( () => []) }

I do it to organize a large collection of related objects. I feed some React components using tableToolbarItems.user tableToolbarItems.items etc

I would like to keep this structure because it self-organize my code and plan to also memoize the host object.

Something like this:

const tableToolbarItems =()=> **useMemo**({ contract: useMemo( () => []), user: useMemo( () => []), items: useMemo( () => []) },[])

Have you ever worked with nested memoization?

bobgravity1 commented 2 years ago

You can’t do the same logic with useEffect if it’s an object because of referential equality. UseEffect would also cause the component to re render

TheNemus commented 2 years ago

Hi, I'm trying to understand memo api but I still don't get it. I write a question in stackoverflow based on your post, can you give me a hand? Ty. https://stackoverflow.com/questions/72775948/how-react-memo-works-with-usecallback

TheNemus commented 2 years ago

sorry, wrong posts

thequinn commented 1 year ago

Love your tutorial, it's more helpful that the React official docs. Thanks, Dmitri!

panzerdp commented 1 year ago

@thequinn Thank you!

joaovtpereira commented 1 year ago

nice tutorial!

panzerdp commented 1 year ago

nice tutorial!

@joaovtpereira Thanks!

callmeAsadUllah commented 9 months ago

thanks!