When Should We Use Memo In React Project?
As a popular library, React has one fantastic feature called Memo. This feature allows you to give a condition when the UI will be rendered. For example, you create some component that renders the expensive calculation. Of course, this component will affect your website or mobile app performance (if you use React Native).
Experiment by experiment has been tried, and I have found the solution, when should we use memo in our projects?
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.
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.
