Using React.memo() to skip unnecessary rendering.

#react #reactnative #hooks #javascript

“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!.