What benefit does useImperativeHandle provide over assigning a forwarded ref in useEffect?

Question

The example provided in the docs is the following:

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} />;
}
FancyInput = forwardRef(FancyInput);

As far as I can see, I can achieve the same thing with

function FancyInput(props, ref) {
  const inputRef = useRef();
  useEffect(() => {
    if (ref) {
      ref.current = {
        focus: () => {
          inputRef.current.focus();
        }
      };
    }
  }, [ref]);
  return <input ref={inputRef} />;
}
FancyInput = forwardRef(FancyInput);

The possible explanation that useImperativeHandle is a bit less verbose seems too trivial to me. What’s under the hood? What makes it necessary or better than the useEffect version?

Answer 1

TLDR; It's the same and useImperativeHandle just handles all of the ref cases and makes sure the passed value is a ref and not just any value.

Answering your question It handles for you everything that is need when using refs, so it saves some code.

---

I was looking at the source code of the hooks and looks like under the hood, useImperativeHandle is almost the same as your approach with useEffect.

You can take a look at the hooks and see that they have a HooksDispatcherOnMount, HooksDispatcherOnUpdate and HooksDispatcherOnRerender.

If you look at the functions associated (fooImperativeHandle and fooEffect) you will see that both call the same function (fooEffectImpl).

So apparently, under the hood, it's the same thing, but with when using useImperativeHandle you don't need to handle the part of .current, it already checks for null values, checks if it's a ref and sets in returned value in .current as you can see here.

That is what I got from looking at the source code, but if I'm wrong, please correct me.