How to do flow type annotations for React hooks (useState, etc.)?

Type inferring doesn't work for me:

const [loading, setLoading] = React.useState(true) // boolean
setLoading('foo') // no Flow error
setLoading(1) // no Flow error

Had to add typings manually:

const [loading, setLoading]: [boolean, ((boolean => boolean) | boolean) => void] = React.useState(false)
setLoading('foo') // Flow error
setLoading(1) // Flow error

I have:

"react": "16.8.6",
"flow-bin": "0.100.0",

UPDATE

As @AndrewSouthpaw pointed, loading has to be used in some context or setLoading won't work correctly.

This works:

const [loading, setLoading] = React.useState(true);
(loading: boolean);

setLoading('foo'); // Flow error

The same without semicolons:

 const [loading, setLoading] = React.useState(true)
 ;(loading: boolean)

 setLoading('foo') // Flow error

ESLint

ESLint no-unused-expressions will give an error from this. eslint-plugin-flowtype has fixed version flowtype/no-unused-expressions.

Flow infers the types, as shown in the PR that added support for hooks to the Flow library.

UPDATE

As discussed in my comments of another answer, the resulting variables must be used contextually for the type-checking to work as expected.

const [loading, setLoading] = React.useState(true);
(loading: boolean);

setLoading('foo') // Flow error

vs.

const [loading, setLoading] = React.useState(true);

setLoading('foo') // no Flow error