I\'ve recently decided to refresh on react\'s documentation and came across https://reactjs.org/docs/react-api.html#reactmemo (React.memo).
At first glance it looked
For shorter explanation:
If React.memo() everything makes React more efficient and optimized, it should be considered as a default behavior, not only an option (like pure function).
Basically, React.memo() prevents redundant rerenders by comparing the component's previous and current props.
Normally, when the Parrent rerenders, the Child rerender as well by default.
With React.memo(), if the props passed into Child are not changed when Parent rerender, Child does not rerender.
The question here is: why React knows props passed to Child was not changed in the current rerender ?
The answer is: React itself has to do a comparison, and it is the cost of React.memo()
If the time to comparison > the time to just rerender the whole Child component, it even slows down your app.