reactjsflowtype

Flow: `React.Ref<typeof Component>` seems to be gone; what should be the replacement?


Based on this section of Type Reference docs, I should be able to:

import type { Node, Ref } from 'react';

function Container(): Node {
  const inputRef = useRef(null);

  return <AutoselectingInput ref={inputRef} />;
}

type Props = {
  ref: Ref<HTMLInputElement>,
};
function AutoselectingInput({ ref }: Props): Node {
  useEffect(() => {
    ref.current.select();
  }, []);

  return <input ref={ref} defaultValue="Hello" />;
}

But then, I've got: "Cannot import `Ref` because there is no `Ref` export in `react`.Flow(missing-export)".

What do I need to use in order to correctly annotate the DOM refs?


Solution

  • If you’re using flow 0.243+, and react 19, you can use RefSetter to annotate refs, according to this section of flow docs. There’s some additional info in patch notes, about removing React.Ref type and using React.RefSetter for annotating refs. It is unclear why React.Ref is not yet marked as deprecated in docs.