Linked Questions

Popular Questions

Currently I find myself writing alot of components like the following:

export default class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      someState1: 'something',
      someState2: 'something',
      someState3: 'something'
    }
  }
  render() {
    return (
      <ComponentOne prop1={this.someState1} {...this.props}/>
      <ComponentTwo prop2={this.someState2} {...this.props}/>
      <ComponentThree prop3={this.someState3} {...this.props}/>
    )
  }
}

Higher level state is passed down through the props as normal and spread into the child component.

In some instances I find I am spreading all the props into every child component, as it is quicker/easier than specifying props.

So the questions are:

  1. Is there a performance cost to spreading all props into every components, even if there could 10s of children components?
  2. Should I be more specific with what props are passed to every component?
  3. Are there any downsides to doing this for every child component?

Related Questions