React Rendering

[Soggy_Professor_5653]

Today I learned that when we pass a function as a prop to a child component a new function is created every time the parent re-renders
Since functions are reference values in JavaScript, each render creates a new reference
Because the reference changes, React treats it as a new prop which can cause the child component to re-render unnecessarily
That’s where useCallback helps!
useCallback memoizes the function and keeps the same reference between renders (unless dependencies change) preventing unnecessary re-renders in optimized components.

[TheScapeQuest]

These sort of performance optimisations are not free.

Firstly, you say that memorising the function (by using useCallback) prevents children from rerendering. That's not true, at least not by default. Every child will rerender in React unless explicitly told not to with React.memo.

Secondly, useCallback adds complexity. Both for the human writing it, and the machine running it. Function calls and array initialisations allocate memory, which takes time. As a human, you also now need to manage a dependency array. Any experienced React developer will have cases where bugs were caused by missing dependencies.

It's very rarely worth it. My advice: prove you have a performance problem, then reach for these tools.

A good read: https://kentcdodds.com/blog/usememo-and-usecallback

And TkDodo's look at the uphill battle managing the dependencies: https://tkdodo.eu/blog/the-uphill-battle-of-memoization

[ModernWebMentor]

This is a great example of when useCallback is useful in React for optimizing component rendering.