Flow: Support of new React api (16.6.0)

[roderickhsiao]

https://github.com/facebook/react/releases/tag/v16.6.0

Some new api being introduced, specially React.memo and React.lazy

Will be good to add support for the new api. Could sent a PR, but wondering if it already exists internally at Facebook

[jbrown215]

We are discussing potential solutions. We don't have any kind of support for it yet.

[0rvar]

I think this definition would work for lazy:

declare function lazy<P, T: React$ComponentType<P>>(() => Promise<T>): T

The other part is to have support for dynamic imports as string => Promise<T>

Next, this definition of Suspense should work:

declare class Suspense extends React$Component<{| fallback?: React$Node, children: React$Node |}> {}

[jbrown215]

I haven't looked into Suspense much, but I have looked into lazy, memo, and forwardRef (still not supported). My main focus right now is getting flow ready to check these functions.

The trouble with typing something as just a React$ComponentType is that ComponentType doesn't keep around sufficient information to check the defaultProps of a component, which is extremely frustrating to developers. Furthermore, HOCs that return ComponentType will erase information about default props. The same would be true if we tried to bake in better support for refs today.

For more concrete examples:

• Ref types today are insufficient for forwardRef
• HOCs erase defaultProps
• HOCs erase ref types

I will go into more detail in a blog post when we get closer to releasing these changes.

[0rvar]

I think the magic defaultProps handling is backwards anyway - if you declare a class as extends React.Component<Props> then that class should match ComponentType<Props>. I think defaultProps should modify how the class accesses props internally, rather than override Props externally. That might be hard to change at this stage, though.

[TrySound]

@jbrown215 I'd say that we don't really need defaultProps in function components for which memo is added. Default params in destructuring do its job just fine.

const Component = ({ a = 1, b = 2 }: { a?: number, b?: number }) => {
}

[jbrown215]

@TrySound: Even so, people do rely on defaultProps for functional components today. Making sure this change isn't breaking is one of my goals.

[LasaleFamine]

Are there any updates about the ongoing development for this support?

[jbrown215]

Landed in 0.89.0. I must have forgotten to close this issue!

On Thu, Jan 10, 2019 at 11:09 AM Alessio Occhipinti <
[email protected]> wrote:

Are there any updates about the ongoing development for this support?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/flow/issues/7093#issuecomment-453151849, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AIJ9z13Ft-mk3xigOX1usoLhhpprtIasks5vB2WlgaJpZM4X5HZL
.

>

Sent from Gmail Mobile

[roderickhsiao]

Thanks all

[suparngp]

I am still seeing this issue with v0.90.0 if I try to export the memoized component. Here is a minimum example to reproduce it

//@flow
import React from 'react';
type Props = {}
const Item = (props: Props) => (
  <div />
);

const memoized = React.memo(Item);

export default memoized; // if I comment this line, flow does not complain. 

const memoized = React.memo(Item);
                    ^ Missing type annotation for `P`. `P` is a type parameter declared in function type [1] and was implicitly instantiated at call of method `memo` [2].
References:
[LIB] ..//static/v0.90.0/flowlib/react.js:296:   declare export function memo<P>(
                                                                             ^ [1]
8: const memoized = React.memo(Item);

https://flow.org/try/#0PTACDMBsHsHcCgCWBbADtATgFwAQCUBTAQwGNdwNpkcByDYsmgbniwE9UCcAFS1AZxwBeHAG8AvvBLQAdv1wBJLAWoiAFKj78AXDy0BKYQD4ca+DhwAeACaIAbjmBH4+llNnycyFdEQAvAmthfAYsADpvZGg1JRVXeAIAD3RsHGsCcCIAV0hcSN8A6xYgA

[alaycock]

Not sure if this is correct, but this seems to work. I'm not sure I understand why it's mandatory to include the Props annotation since I would've hoped for it to be passed through or be inferred by default.

//@flow
import React from 'react';
type Props = {
    thing: string
}
const Item = (props: Props) => (
  <div />
);

const memoized = React.memo<Props>(Item);
export default memoized;

https://flow.org/try/#0PTACDMBsHsHcCgCWBbADtATgFwAQCUBTAQwGNdwNpkcByDYsmgbniwE9UCcAFS1AZxwBeHAG94ASCwALRADsA5gC4c-LBnkL4AX3gloctTgCSWAtREAKVH34re0AQEphAPhyX4OHAB4AJogAbjjArvBOLHoGRsjm0IgAXgR+wvgMWAB0scjQPg4Crpam5hHwBAAe6Ng4fgTgRACukLjZ8Ul+LEA

[jbrown215]

The props need to be explicitly annotated when they are exported due to changes in 0.85.0