如何在 Flow 中输入 useRef 挂钩？

Question

I can't figure out how to type a useRef hook in Flow. In TS I could just do:

const inputRef = useRef<InputRefType>();

But this doesn't work in Flow and I'm unsure what to replace it with.

This is what the code looks like:

const inputRef = useRef();
return (
  <>
    <input ref={inputRef} name="email" value={email} onChange={handleChange} />
    <button onClick={() => inputRef.current.focus()}>Ref</button>
  </>
);

Here is the error message:

Cannot call inputRef.current.focus because property focus is missing in null [1]. [incompatible-use]

     src/App.js
      30│       }}
      31│     />
      32│     <input ref={inputRef} name="email" value={email} onChange={handleChange} />
      33│     <button onClick={() => inputRef.current.focus()}>Ref</button>
      34│   </>
      35│ );
      36│ };

     /private/tmp/flow/flowlib_1fa18dde633e97c7_501/react.js
 [1] 197│   | { -current: React$ElementRef<ElementType> | null, ... }

Complete App.js file:

// @flow
import * as React from 'react';
import { useRef, useState } from "react";
import type { ComponentType } from "react";

const App: ComponentType<{}>  = () => {
  const [email, setEmail] = useState("");

  const handleChange = (e): void => {
    e.preventDefault();
    setEmail(e.target.value);
  }

  const inputRef = useRef();

return (
  <>
    <input ref={inputRef} name="email" value={email} onChange={handleChange} />
    <button onClick={() => inputRef.current.focus()}>Ref</button>
  </>
);
};

export default App;

Error:

Answer 1

You can solve this in a number of ways, either you declare the ref as it's type like so

const inputRef = useRef<HTMLInputElement | null>(null);

Because inputRef is initially null when you initialise it, so just HTMLInputRef would be incorrect. This is a native JS class that can just be used, it's not a flow type.

---

A simpler way is to ignore the declaration and write inputRef.current?.focus() as mentioned in the comments and this works fine for this example but is limited by inference because you're never checking or defining the type.

---

Or the other way is through type refinement where instead of just doing a null check you also check for whether it's the type you expect.

if (inputRef.current instanceof HTMLInputElement) {
  inputRef.current.focus();
}

This protects you against soundness errors in case in the off chance inputRef.current is defined but it ends up being a button instead of an input element.

---

The choice is really up to you and depends on your needs. They'll all work for your use case.

Answer 2

You should do a null check before calling inputRef.current?.focus()

// @flow
import * as React from 'react';
import { useRef, useState } from "react";
import type { ComponentType } from "react";

const App: ComponentType<{}> = () => {
    const [email, setEmail] = useState("");

    const handleChange = (e): void => {
        e.preventDefault();
        setEmail(e.target.value);
    }

    const inputRef = useRef();

    return (
        <>
            <input ref={inputRef} name="email" value={email} onChange={handleChange} />
            <button onClick={() => inputRef.current?.focus()}>Ref</button>
        </>
    );
};