Why and when do we need to bind functions and eventHandlers in React?

by

Binding is not something that is specifc to React, but rather how this works in Javascript. Every function / block has its own context, for functions its more specific to how its called. The React team made a decision for this to not be bound on custom methods on the class (aka not the builtin methods like componentDidMount), when adding ES6 support (class syntax).

When you should bind the context depends on the functions purpose, if you need to access props, state or other members on the class, then you would need to bind it.

For your example, each is different and it depends on how your component is set up.

Pre binding to your class

.bind(this) is used to bind the this context to your components function. However, it returns a new function reference each render cycle! If you don’t want to bind on each usage of the function (like in a click handler) you can pre-bind the function.

a. in your constructor do the binding. aka 

class SomeClass extends Component{
    constructor(){
        super();
        this.someEventHandler = this.someEventHandler.bind(this);
    }
    someEventHandler(event){
    }
    ....
}

b. make your custom functions on the class fat arrow functions. aka

class SomeClass extends Component{
    someEventHandler = (event) => {
    }
    ....
}

Runtime binding to your class

few common ways to do this

a. you can wrap your components handler function with an inline lambda (fat arrow) function.

onChange={ (event) => this.someEventHandler(event) }

this can provide additional functionality like if you need to pass additional data for the click handler <input onChange={(event) => { this.someEventHandler(event, 'username') }>. The same can be done with bind

b. you can use .bind(this) as described above.

onChange={ this.someEventHandler.bind(this) }

with additional params <input onChange={ this.someEventHandler.bind(this, 'username') }>

If you want to avoid creating a new function reference but still need to pass a parameter, its best to abstract that to a child component. You can read more about that here

In your examples

// 1
return <input onChange={this.someEventHandler.bind(this)}>

This is just doing a runtime event handler bind to your class.

// 2
return <input onChange={(event) => this.someEventHandler(event) }>

Another runtime bind to your class.

// 3
return <input onChange={this.someEventHandler}>

You are just passing the function as the callback function to trigger when the click event happens, with no additional parameters. Make sure to prebind it!

To summarize. Its good to think about how to optimize your code, each method has a utility / purpose depending on what you need.

More Related Contents:

  1. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  2. Unable to access React instance (this) inside event handler [duplicate]
  3. What do multiple arrow functions mean in JavaScript?
  4. Adding script tag to React/JSX
  5. Arrow function without curly braces
  6. Create object from class name in JavasScript ECMAScript 6
  7. Why shouldn’t JSX props use arrow functions or bind?
  8. When to use ES6 class based React components vs. functional ES6 React components?
  9. What does three dots do in ReactJS [duplicate]
  10. React Native: require() with Dynamic String?
  11. Concatenating variables and strings in React
  12. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  13. What is the difference between using constructor vs state = {} to declare state in react component?
  14. Active link with React-Router?
  15. When should I use brackets with imports
  16. ES6 array map doesn’t return anything: ReactJS
  17. Arrow functions and the use of parentheses () or {} or ({})
  18. Why React Hook useState uses const and not let
  19. What does calling super() in a React constructor do?
  20. When is it appropriate to use a constructor in REACT?
  21. this.setState is not a function [duplicate]
  22. React.js ES6 avoid binding ‘this’ to every method
  23. Error: How to serialize data from getStaticProps : Next.js
  24. Update one of the objects in array, in an immutable way
  25. map function not working in React
  26. How to namespace es6 classes (for React components)
  27. React cannot read property map of undefined
  28. Exporting functions with reactjs and babel
  29. Deep nested array of objects not rendering
  30. import * as React from ‘react’; vs import React from ‘react’;

Leave a Comment