Empty Dependencies with useMemo or useCallback VS useRef

Question

In this GitHub issue I essentially proposed changing:

x = useCallback( ... , []);

To:

x = useRef( ... ).current;

The two are the same but with useRef React doesn't compare the dependencies.

For which a reply came with a question:

Is there ever a situation where a dependency-less useMemo or useCallback would be a better choice than useRef?

I can't think of one, but I may have overlooked some use-cases.

So can anyone think of such situation?

Answer 1

Per React Hooks API documentation:

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render ... Using a callback ref ensures that even if a child component displays the measured node later (e.g. in response to a click), we still get notified about it in the parent component and can update the measurements.

You can read more about it here and here.

Answer 2

While you can use useRef to emulate useCallback or with an empty dependency, You cannot use it for all possible scenarios of useCallback which is to rememoize when any of the dependency changes.

Also It won't make much of a performance difference if you use useCallback with empty dependency or useRef since it doesn't have to perform any heavy comparison.

Also if you change the function implementation a bit so that you have to recreate it on a particular param change, you can simply update the implementation with useCallback and add in the extra param as dependency. However if you implement it with useRef, you have to revert back to useCallback