- When using a pure component, pay special attention to arrays and functions. Arrays and functions create new refs so it's up to you to create them only once and not during every render.
Functions
// Never do this
render() {
return <MyInput onChange={this.props.update.bind(this)} />;
}
// Never do this
render() {
return <MyInput onChange={() => this.props.update()} />;
}
// Instead do this
onChange() {
this.props.doUpdate()
}
render() {
return <MyInput onChange={this.onChange} />
}
Arrays
// Never do this, if there are no items, SubComponent will render every time!
render() {
return <SubComponent items={this.props.items || []} />
}
// This will avoid re-rendering
const EMPTY_ARRAY = []
render() {
return <SubComponent items={this.props.items || EMPTY_ARRAY } />
}
