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:
- Is there a performance cost to spreading all props into every components, even if there could 10s of children components?
- Should I be more specific with what props are passed to every component?
- Are there any downsides to doing this for every child component?