Advertisement
Guest User

Untitled

a guest
Mar 24th, 2017
48
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.83 KB | None | 0 0
  1. export class BadFunComp extends React.PureComponent {
  2. handleFun() {
  3. const { funApi } = this.props;
  4. funAPi();
  5. }
  6. render() {
  7. // displayCoolness.props.handleFun will always have a new ref value
  8. // causes child to re-render on ever BadFunComp render
  9. return (
  10. <DisplayCoolness onFun={ () => this.handleFun() } />
  11. );
  12. }
  13. }
  14.  
  15. export class GoodFunComp extends React.PureComponent {
  16. constructor(...args) {
  17. super(...args);
  18. // add bound method to instance
  19. this.handleFun = this.handleFun.bind(this);
  20. }
  21. handleFun() {
  22. const { funApi } = this.props;
  23. funAPi();
  24. }
  25. render() {
  26. // displayCoolness.props.handleFun always points to the same function
  27. // displayCoolness does not needlessly re-render
  28. return (
  29. <div>
  30. <DisplayCoolness onFun={ this.handleFun } />
  31. </div>
  32. );
  33. }
  34. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement