Warn when a component is passed props that it doesn't need

[jussi-kalliokoski]

It would be cool to be able to get warnings for typoed or otherwise extraneous props passed to a component, similar to how React.DOM warns if you pass class when you meant className.

With PropTypes.shape you could probably even ensure deep validity of the passed data. This would not only be useful for finding bugs, but also for optimizing hot components by making sure the shapes are aligned.

Obviously this would need some sort of opt-in, like propTypes.

[RReverser]

In that case, you wouldn't be able to pass custom attributes such as data-*, aria-* for DOM (but can be any other names for custom components).

[jussi-kalliokoski]

@RReverser like I said, this would need some sort of opt-in, which would not be used by components that take free-form props.

[RReverser]

@jussi-kalliokoski In that case, I think it can be implemented as external mixin or base class for those who need it.

[syranide]

If you adhere to very simple rules this could very easily be solved statically/automatically in the future instead. That way everyone would benefit, regardless of whether you specify propTypes or not. Definitely not saying this shouldn't be done though, but that's where I would focus my effort if I would.

[jussi-kalliokoski]

@RReverser

In that case, I think it can be implemented as external mixin or base class for those who need it.

Done: https://github.com/jussi-kalliokoski/react-mistyped-props (still missing the shape validation, but I'll probably add that later).

@syranide

If you adhere to very simple rules

Which ones? ;)

this could very easily be solved statically/automatically in the future instead.

That would be the perfect case and would give the fastest feedback, however...

but that's where I would focus my effort if I would.

... since static analysis is not exactly my forté, while I'm waiting for Flow (whose annotations I already started using, btw, since I feel happier reading code whose public functions are type-annotated :) or something similar to solve this problem among others, I made that mixin as a temporary solution.

[zpao]

Merging this into #1587 which has more discussion.