React Performance Anti-Pattern: Creating Functions in render() - solution2.js

solution2.js

import MyCustomButton from './ui/MyCustomButton'

class MyClicker extends Component {
  constructor() {
    super()
    this.state = { clicked: false }
  }

  handleClick = () => {
    // "this" is the right instance of this component
    this.setState({ clicked: true })
  }
  
  render() {
    return <div>
      <MyCustomButton onClick={this.handleClick}>
        Click Me
      </MyCustomButton>
      {this.state.clicked && <div>Nice work!</div>}
    </div>
  }
}