React.Component defaultProps not validated by flow

[EvHaus]

Using flow 0.41.0, with the following code:

import React, {Component} from 'react';

export default class MyComponent extends Component {
	props: {
		someValue: string
	};

	static defaultProps = {
		someValue: 123
	};

	render () { ... }
}

I expected flow to alert me that someValue is defined as a Number when it should be string. But it does not warn me at all.

[nmn]

$Diff should error if the second param is not strictly a sub-object of the first param.

[mwalkerwells]

@nmn Which $Diff are you talking about? Looking at the library definition, props and defaultProps are not inter-dependent: https://github.com/facebook/flow/blob/master/lib/react.js

Also, you could make the case that a polymorphic class like this should infer that the type is { someValue: 123 | string }.

[nmn]

@mwalkerwells $Diff is used to create the prop requirements for a React Component. This way props that exist as defaultProps don't need to passed at the call-site.

Also, the types here are not inferred they are defined for props so inferring { someValue: 123 | string } makes no sense.

---

That said I'm investigating a possible fix that would validate that props and defaultProps are compatible.

- declare class React$Component<DefaultProps, Props, State> { ... }
+ declare class React$Component<DefaultProps: $Shape<Props>, Props, State> { ... }

This may or may not work.

[mwalkerwells]

$Diff is used to create the prop requirements for a React Component.

Can you link to this in the React.Component library definition?

[nmn]

@mwalkerwells It's kind of in the Flow internals. But this gets close: https://github.com/facebook/flow/blob/master/lib/react.js#L97

[asolove]

There were a number of issues with the relationship of props and default props that have been fixed in Flow v0.53.

I slightly updated the original code and it now type-checks fine in Flow v0.53.

As a result, I think this can now be closed. (/cc @calebmer)

[calebmer]

One thing worth noting is that we only check defaultProps when you create an element from your component. This is ok:

import * as React from 'react';

class MyComponent extends React.Component<{prop: number}> {
  static defaultProps = {
    prop: 'foo',
  };
}

However, you get an error when you add <MyComponent />. This mirrors React’s runtime behavior 😊

https://flow.org/try/#0JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQduANmugLICeAwiZAHZY+8LAA8YggCbpseGADoe4CAKEAeAN5hiYAFxw+AVxAAjLFAC+APjjq6cOKhjIYwXHAlYCyA0xgAFbXQAXhs7ezgtCF1yAggIMgAaMPN6cwZVTkV+QXgAeksaIA

[fragosti]

@calebmer I'm confused about "mirrors React's runtime behavior" being a good thing. Seems like it should be possible to check this type of thing without instantiating a component? This come up a lot if you have React component packages.