Example of PasswordInput has an arrow function inside render method

Hi Cory, In ExampleAllFeatures I’ve noticed that you used an arrow function as a handler of the onChange event inside the render function.

  render() {
    return (
      <div>
        <PasswordInput
          htmlId="password-input-example-all-features"
          name="password"
          onChange={ event => this.setState({ password: event.target.value })}
          value={this.state.password}
          minLength={8}
          placeholder="Enter password"
          showVisibilityToggle
          quality={this.getQuality()}
          {...this.props} />
      </div>
    )
  }

Won’t it create an instance of this function on each render? If so, will this pattern provide the same result (while creating one instance of this function)?

class ExampleAllFeatures extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      password: ''
    };
    this.handleOnChange = this.handleOnChange.bind(this);
  }

  getQuality() {
    const length = this.state.password.length;
    return length > 10 ? 100 : length * 10;
  }

  handleOnChange(e){
    this.setState({ password: e.target.value })
  }
  render() {
    return (
      <div>
        <PasswordInput
          htmlId="password-input-example-all-features"
          name="password"
          onChange={this.handleOnChange}
          value={this.state.password}
          minLength={8}
          placeholder="Enter password"
          showVisibilityToggle
          quality={this.getQuality()}
          {...this.props} />
      </div>
    )
  }
}

[coryhouse]

Thanks for the comments @RIP21. I don’t typically use arrows in render in real apps, but for docs I favored brevity over performance. You’re right that there’s a tradeoff though: people may copy the practice without realizing the potential performance implications. So this was intentional, but I’ll add a comment to the course to help clarify. Thanks for the comments guys!

[coryhouse]

I just submitted a patch for m6-05 (the clip where I show this code) to display an annotation to help clarify:

“For performance reasons, arrow functions should be avoided in render. I’m just using one here for simplicity.” The patch should publish soon, so closing this. Thanks for the input guys!