Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
export class BadFunComp extends React.PureComponent {
handleFun() {
const { funApi } = this.props;
funAPi();
}
render() {
// displayCoolness.props.handleFun will always have a new ref value
// causes child to re-render on ever BadFunComp render
return (
<DisplayCoolness onFun={ () => this.handleFun() } />
);
}
}
export class GoodFunComp extends React.PureComponent {
constructor(...args) {
super(...args);
// add bound method to instance
this.handleFun = this.handleFun.bind(this);
}
handleFun() {
const { funApi } = this.props;
funAPi();
}
render() {
// displayCoolness.props.handleFun always points to the same function
// displayCoolness does not needlessly re-render
return (
<div>
<DisplayCoolness onFun={ this.handleFun } />
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.