Next-gen React is looking great, and class components are now rarely necessary.. but c

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

This is exactly solved by the example at <a href="https://reactjs.org/docs/hooks-refer

ref methods for function components about rfcs HOT 4 CLOSED

reactjs commented on June 29, 2024 4

ref methods for function components

from rfcs.

Comments (4)

TrySound commented on June 29, 2024 31

@ericvicenti Yes, there is an api for that.
https://reactjs.org/docs/hooks-reference.html#useimperativehandle

from rfcs.

phryneas commented on June 29, 2024 15

This is exactly solved by the example at https://reactjs.org/docs/hooks-reference.html#useref - or am I missing something here?

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

from rfcs.

ericvicenti commented on June 29, 2024 4

Sorry, my example was confusing because I'm providing and consuming the same method name "focus". You posted an example of using a ref (useRef is very well named). I'm asking, how can you provide a custom ref? How can I define my own "focus" method from a function component?

I have an example with forwardRef above, and I think it may be the correct way to do it, but I should probably useMemo before assigning to the forwarded ref.current.

const MyInput = forwardRef((props, ref) => {
  const innerInput = useRef(null);
  const inputHandle = innerInput.current;
  ref.current = useMemo(() => {
    if (!inputHandle) {
      return null;
    }
    return {
      focus: () => {
        doSideEffect();
        inputHandle.focus();
      },
    };
  }, [ inputHandle ]);
  return <Input {...props} ref={innerInput} />;
});