React: Allow disable of tag prop warnings in 15.2

[natew]

This only applies to 15.2. I'm curious first as to if this would cause any problems or if theres a strong reason why allowing people to disable these warnings would be disagreeable.

I would be open to alternative solutions. We have the problem that some of our props are used only in lifecycles or HOC's.

We often do this in render:

class Child {
  componentWillMount() {
    // do something with this.props.otherProp
  }

  render() {
    const { children, ...props } = this.props

    return <div {...props}><span>{children}</span></div>
  }
}

So now otherProp gets passed to div, causing an error. But destructuring it out leaves an unused variable in render, which is not very nice either.

My initial thought was create a helper eventProps() that filters out just event props, but that is both verbose and potentially heavy (lots of O(1) lookups I guess).

Second thought is we could patch React.createElement, but that seems a bit hacky as well.

I don't see much downside in passing in props to elements, though I guess I could see some dangers.

[milesj]

It's a code smell to spread unrelated props into a DOM element -- it's better to be explicit here. What exact use case are you trying to solve by spreading?

[natew]

Passing all events, classname, style, down to outer tag.

[syranide]

It's likely that unknown props will be renderer as-is in the future, so relying on props being silently dropped is a bad idea.

[probablyup]

@natew we ended up using lodash's omit function with PropTypes as the array to deal with this in a more automatic way. Looks something like this:

class Component extends React.Component {
  render() {
    return (
      <div {..._.omit(this.props, Object.keys(Component.propTypes))}>
         {this.props.foo}
      </div>
    );
  }
}

Component.propTypes = {
  foo: React.PropTypes.string,
}

Can optimize it by precaching the keys, etc.

[aweary]

Closing this out since it's unlikely React will implement any API for this and it's easily solvable with the spread operator or third party utilities

[natew]

For reference for anyone watching this, Dan abramov tweeted about this
becoming the default in 16 or 17.

On Fri, Apr 21, 2017 at 2:51 PM Brandon Dail [e-mail]
wrote:

Closed #7368 https://github.com/facebook/react/issues/7368.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/7368#event-1053149470, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAAvRLLGxa08ix-5sXl1RgTGZjdkLhhuks5rySThgaJpZM4JXtej
.

[aweary]

Specifically, the default will be to pass on the unknown props to the DOM and just not warn about it. If you want to avoid rendering useless DOM attributes you still need to be aware of what you're passing to DOM elements.

[gaearon]

Yea, and we'll also probably make the warnings less obnoxious in React 15.6 so the console is at least usable. https://github.com/facebook/react/pull/9488