Currently ref is called on any JSX element (tag or FC), but react uses it only on tags, for FC you have to manually handle ref prop (https://reactjs.org/docs/forwarding-refs.html).
Consider example:
interface FancyInputProps {
ref?: Ref<HTML.Input>;
}
function FancyInput({ref} : FancyInputProps){
return <div class="fancy-input">
<input type="text" ref={ref} />
</div>;
}
let input : HTML.Input;
document.body.append(<FancyInput ref={(ref) => console.log(input = ref)} />);
// ref is called twice
// <input type="text">
// <div class="fancy-input">
console.log(input);
// returns div, but input is expected
// <div class="fancy-input">
Currently
ref
is called on any JSX element (tag or FC), but react uses it only on tags, for FC you have to manually handleref
prop (https://reactjs.org/docs/forwarding-refs.html).Consider example: