Popular posts

Hi thanks for the question. Every time a React component re-renders, a new function gets created. So without the useCallback, new increase and decrease functions are created every time the App component renders.

This is known as referential equality. The increase and decrease functions that loads on every render does not point to the same functions in memory (even though they have the same name, logic, etc.).

Using useCallback tells React to cache the increase and decrease functions if number does not change. When number is changed, the function is then updated.

So, only using React.memo() will still result in unnecessary components rendering because the increase and decrease functions passed as props in Counter are returned as new functions each time app renders. The React.memo(Counter) component detects a change in the component's props and therefore will re-render it.

I hope that explains it. I will edit the article to make it more clear. Thanks!