Edit

React Best Practices

Handling events in React

Don't

handleClick is not properly bound. this will not be available in the function body.

class MyComponent extends Component {
  handleClick() {
    // Handle click event
    console.log("this will be null", this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>{"Click"}</button>
    )
  }
}

Don't

Don't bind functions inside render. A new function reference will be created everytime the component is re-rendered.

class MyComponent extends Component {
  handleClick() {
    // Handle click event
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>{"Click"}</button>
    )
  }
}

Don't

Don't use arrow functions to bind callbacks in render functions. A new function reference will be created everytime the component is re-rendered.

class MyComponent extends Component {
  handleClick() {
    // Handle click event
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>{"Click"}</button>
    )
  }
}

Don't

Binding in the constructor and binding with the class fields syntax is reduntant.

class MyComponent extends Component {
  constructor() {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = () => {
    // Handle click event
  }

  render() {
    return (
      <button onClick={this.handleClick}>{"Click"}</button>
    )
  }
}

Do

Bind with the class fields syntax to bind callbacks for events. Requires ESNext class fields which is enabled by default in Reaction.

class MyComponent extends Component {
  handleClick = () => {
    // Handle click event
    console.log("this will be defined", this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>{"Click"}</button>
    )
  }
}

Try a demo on JS Bin on jsbin.com

Resources

• ESnext Class fields - https://github.com/tc39/proposal-class-fields