When Should We Use Memo In React Project?

If there is an expensive calculation.

We should use put our component code inside memo. Even though you just write code for a component only.

Expensive component

If there are loop components and each item has state.

This method will avoid rerendering other components when the state in one component has been changed. Although each item doesn’t have expensive calculations, I suggest for use memo because the more items that are looped, the more influential it will be. I have tried to create a small application with React Native, then the app loops a hundred components. When I pressed the button in one loop item, there was some delay process then the UI was rendered in seconds time. What’s happened? Ya, each of the components was doing render! But we want to rerender in one component only.

Looping component

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store