Annotating a ref callback

Question

Is annotating the callback of a ref as a HTMLElement the best approach? I assume 99% of the time this is going to be the type, no?

https://facebook.github.io/react/docs/more-about-refs.html

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md

<input type="text" ref={(ref: HTMLElement) => this.myTextInput = ref} />

Answer 1

At the moment, Flow does not particularly understand the ref property, and will let you set the ref property to anything. I couldn't find a GitHub issue tracking this, so I opened one.

So as far as Flow's concerned, all it cares about is that the expression that you pass to the ref parameter typechecks. So it will allow you to write

<Foo ref={123} />

but not

<Foo ref={"boom" * 10} />

I'm not an expert on React refs, but yeah, it does sound like an input element will be passed an HTMLInputElement, which is a subtype of HTMLElement. So using HTMLElement or HTMLInputElement should express what you intend.