Reason for useRef and useCallback

[ahbarrozo]

Hey, I have a React noob question:

What is the reason for using useRef and useCallback in your forms and menus? Is there any particular advantage compared to using plain JS functions, or getting values from input fields in the form with, say, event.currentTarget.field.value, for a form submission event?

Thanks a lot for maintaining this repo! It's a beautiful implementation!

[hoangvvo]

My reason for useRef is mostly due to preference. To me, the state of the input is already kept track by the DOM so a React state for its value is not necessary. Another reason would be that if you do a "controlled" form (useState), every time we type/remove a letter, a rerender is made (because we call setState on changes) and that is a waste of computation. (Libraries like react-hook-form uses this technique for performance)

[hoangvvo]

My reason for useCallback in there is not necessarily justified. But as you know if an inline function is used as a prop for a complex component, every time it would be recreated and different so the child component would also be rerendered due to its prop being different.

You would find out a lot of this "performance" thing when reading about useCallback. However, for most other cases, it is actually counter intuitive to use useCallback since useCallback also has its own performance overhead (and the overhead of rerender is just not as much since React is really optimized) and it is obviously easier to just write an inline function. Such overuse is known as premature optimization. There is a great article on it: https://kentcdodds.com/blog/usememo-and-usecallback

Another case where I have it as useCallback is when it is used inside useEffect of the child component (think, like a onCreated prop). In which case, it would work incorrectly without useEffect (or better yet, by moving it outside of the react component) since on every render it recreates a new function which cause the child useEffect to recognize it as a different thing and reruns incorrectly.

So to sum up, only consider if you know the child component is complicated or if the function is used as part of a lifecycle. For most other cases, you don't need it.

I would write some example code to illustrate my point later when I get home.

[ahbarrozo]

Thanks a lot, really appreciate your response.

[hoangvvo]

I just reread some of the articles regarding useCallback and see an interesting opinion - that is, you should useCallback/useMemo all the intermediate values. This can be found on this blog https://attardi.org/why-we-memo-all-the-things/ (Coinbase). An interesting excerpt is this:

On top of that, leaving the responsibility of deciding when to use memo and when not to places an unnecessary burden on all our engineers

Performance is important, but so is that of the engineers. If it is unclear whether one should memo, it seems fine to do so. Also there is an experimentation at Facebook to automatically do this by default (you write non-memo versions, compiler does the rest): https://www.youtube.com/watch?v=lGEMwh32soc