Flow: React$Element<any> or React.Element<*>

[steida]

I would love to know final official recommendation how we should type element. Thank you.

[0rvar]

any allows any type, * tries to infer a single type statically -- so it depends on what you need.
If you need the variable to hold a react element regardless of props, use any. If you need to be sure the props are always the same, use *.

[dmnd]

I'd love to see this documented too. How to type a React Element is conspicuously missing from the Flow + React page in the docs.

I've seen React$Element<*>, React.Element<*>

[youngzhao-xyz]

@dmnd:

The updated doc now explains the difference between React$Element<*>, React.Element<*> (basically they are the same). This is based on flow v0.53.1:

import React from 'react' doesn't exposes the React types anymore. So if you want to use React.Element<*>, you need to use import * as React from 'react'.

These will all work

// I think this the best
import React from 'react';
import type { Element } from 'react';
const test: Element<*> = <div />;

import * as React from 'react';
const test: React.Element<*> = <div />;



md5-4d93b899e653543bc19e9b4566b2b1a6



import React from 'react';
const test: React$Element<*> = <div />; // React$Element is a global type



md5-7bf21c78afb057c562808920058203a7



import React from 'react';
const test: React.Element<*> = <div />;

Doc: https://flow.org/en/docs/react/types/#toc-react-element
React$Element: https://github.com/facebook/flow/blob/master/lib/react.js#L159
Element: https://github.com/facebook/flow/blob/master/lib/react.js#L209

[dmnd]

Excellent, thanks @youngzhaosignifyd. I think we can probably consider this issue closed now @steida