Ok so this is a big question to answer in one comment, but I’ll do my best.

First off, if the component doesn’t re-render often, there there is a chance that no optimisation is needed, so you are cool to stay with your anonymous function.

Of course, there are times where even these seldom re-renders might cause lagginess so you would want to optimise them. To understand whether you need to do that, open the React devtools and measure the time these re-renders take. If it’s < 16ms you are ok (the delay is not perceivable). You wouldn’t want to optimise early on when it’s not needed, but only when you are trying to solve a particular issue. So first measure and then check whether you need the optimisation or not.

These things aside, you are just fine using an arrow function on cheap components (small HTML component tree without expensive computations), because the benefits of escaping a re-render will be almost un-perceivable by the user, should you optimise something that doesn’t need optimisation.

To answer your original question, React docs provide the easy way to go. It’s a tutorial meant for people that want to learn React. The things that I’m talking are more advanced (covered under the performance page of the react docs) and are mainly oriented towards people that have complex apps where performance is actually an issue. For most people (that want a simple small app), it would be an overkill to mention memoization from the start.

My advice would be the following:

1. If you are building a high level component (with a lot of subcomponents underneath it), either utilise useCallback or make sure that the expensive subcomponents are properly wrapped with memo .
2. If you are building a low level component (either a leaf in the tree or 1–2 small subcomponents below it), it might not be worth your time wrapping everything with useCallback and you should stick with anonymous functions (since you don’t want to add complexity for future readers)

These advices only apply to places where things will re-render, if things won’t re-render at all (i.e. a Page component), then you will be just fine sticking with anonymous functions all the way.

Hope I answered your question :)

Cheers