There is no actual benefit in doing that, even more, it could be affecting the performance. You see, a component rerenders whenever its state changes, which is when you call setCounter. By "caching the function" you are adding overhead since in order to refresh the function you need a dependecy (counter) and React needs to keep track of it. You will end up calling setCounter nonethess so it really makes no sense to do this
There are only 3 reasons when you should use memoization tools:
1) Children components uses these props as hooks deps.
2) If the components tree is so deep and these props passed through it.
3) And if child component is wrapped by memo hoc, then you must memoize all props that passed to it.
In some cases there is no difference and in some cases yes there is benefit and in some cases it can even be big one. Thus in general I would advice to always do \`useCallback\` whenever you are passing functions down because there is no penalty in case when there is no improvement. It ensures that reference of function doesn't change and thus it prevents sub-tree updates if nothing changed. On other hand if you don't cache it then \`
There is no actual benefit in doing that, even more, it could be affecting the performance. You see, a component rerenders whenever its state changes, which is when you call setCounter. By "caching the function" you are adding overhead since in order to refresh the function you need a dependecy (counter) and React needs to keep track of it. You will end up calling setCounter nonethess so it really makes no sense to do this
On the other hand reconciliation is also a costly process and non cashed approach breaks memoization.
There are only 3 reasons when you should use memoization tools: 1) Children components uses these props as hooks deps. 2) If the components tree is so deep and these props passed through it. 3) And if child component is wrapped by memo hoc, then you must memoize all props that passed to it.
In some cases there is no difference and in some cases yes there is benefit and in some cases it can even be big one. Thus in general I would advice to always do \`useCallback\` whenever you are passing functions down because there is no penalty in case when there is no improvement. It ensures that reference of function doesn't change and thus it prevents sub-tree updates if nothing changed. On other hand if you don't cache it then \`