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?
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.