Feed
Such a great and easy to understand article Victoria! Thank you for that! One question, how did developers handle this before hooks?
If I use contexts in any project , then we are not passing a props, so there will be no need to to use callbacks right, as the component will only re-render the component if the state value which it uses changed. Am I right?
That's the article I needed! Very well explained, thanks Victoria Lo :)
Interesting hook! Well this is my first time seeing this hook in action. I'll keep note of what it does for future use.
Increase and Decrease anyway are not getting called again and again when the component gets rerendered then why did you use useCallback ?
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!
What will happen if I use React.memo() only and not useCallback
This was super useful to me Victoria Lo.
Nikhil Patil
Currently Studying in Government Polytechnic Mumbai and Pursuing Diploma in Computer Engineering
Great source for learning useCallback! well done!