Flow: React functional component types that match TS types

[quangbuule]

Proposal

It would be great if we can have React functional component types that match with React.FC on TS (which includes children in the props).

Use case

We tried the generate Flow typedef for a TS React component, we basically rename React.FC to React$StatelessFunctionalComponent, which make Flow complain because on TS side, the component was having children as a prop (which conforms the React.FC) but the React$StatelessFunctionalComponent doesn't have that.

[Brianzchen]

Pretty sure this is a design decision that TS made that Flow decided not to take. For one, a component doesn't necessarily have to accept children, consider a component that decided to look like this

const Comp = ({ text }: { text: string }) => (
  <div>{text}</div>
);

Or if it does accept children, it doesn't have to be React.Node, it could be a render function

const Comp = ({ children }: { children: () => React.Node }) => (
  <div>{children()}</div>
);

Basically being explicit about these things is generally better. For me, having to define children as explicitly React.Node at least makes me consider if this could be simplified to just string | number?

On top of this, Flow doesn't require you to define the type of the component (unless you're exporting it), it can very easily infer, which would cause strange behaviour in some components having a children prop predefined, and others not.

And honestly I've never even used React$StatelessFunctionalComponent. Most of my components look like this, or something similar.

const Comp = (): React.Node => {
// ...