DEV Community

loading...
Cover image for Using React.memo() to skip unnecessary rendering.

Using React.memo() to skip unnecessary rendering.

guillermodv profile image guillermodv Updated on ・2 min read

Alt Text

“the one who does not have a memory, creates one of paper” Gabriel García Marquez.

Why do we need to use memo on React.js components?

First of all, let´s recap how React works. Every time that our state changes the component will be rerendered, so each child component will be re-render throwing functions on the creation component.
Then if for example, we have a component father called Customers and a child component called ListCostumers that shows a list of Customers with every row has a lot of information of that component that was obtained by the way of fetch on use effect method or just using a get function like Axios or something like that. Every time that the father component (Customers) will be re-rendered her son ListCostumers will be rerendered and the fetch function will be called, paying for that a lot of time on computer time and money if we pay for cloud database use or something like that.
To avoid this, we can say that the child component (List Customers) may be memorized (React.memo) to avoid re-renders.

How can I use that and what does it mean?

Let me write just a line of code…

const ListCustomers = React.memo(({customers}) => (a fantastic code...));

React started to observe this received props called customers and memorized them and after the first render of this component every time that we re-render this child component customers will be compared with the last customer's props and if we don't have any changes this child component will not be rerendered avoiding a fetch or render functions that consume a lot of computational power.

  • So, ok great from now, I am going to always use memo components. Is it great?
  • Just no, boy...

Why can't we always use a memo?

Memo consumes a lot of computational power too, you need to consider that a list comparative for example cost in terms of computational times.

  • So, Every line of fantastic code will consume computer time.
  • Yes, but it's not easy we need to consider a lot of things.

We need to considerate that the power consumption of memo comparatives is lower than executing a fetch or another function that we need to use to render our child components and how we know each child component too ( cascade render ) and for example if we need to fetch from AWS or Cloud Database we need to pay this computational power if we have this situation come on, use memo!.

Conclusion

Great power comes with great responsibility, use it with care, you need to ensure where you want to use your computational power.

Alt Text

Guillermo A. Del Vecchio.
Sr software engineer, Golden Boy React.js / React Native Developer.

Discussion (8)

pic
Editor guide
Collapse
amineamami profile image
amineamami

So confusing...

Collapse
guillermodv profile image
guillermodv Author

thanks for your time!

Collapse
thegeox profile image
Jorge Altamirano

Don't know why you say was confusing. Is it a short explanation that just explain an overall of memo? Yes. Confusing one? Don't think so.

Collapse
guillermodv profile image
guillermodv Author

thanks for your time! it`s my first article.

Collapse
scampa profile image
scampa

Keep up the good work!

Collapse
zeta22 profile image
Zeta Zarza

Really nice article! As my Uncle Nacho says: Don't tell it to grandma

Collapse
dannypule profile image
Danny Pule

Good effort. Can I suggest re-drafting it as there are quite a few typos and misused words

Collapse
guillermodv profile image
guillermodv Author

yeah! I will try to review it! thanks for your time!