Reactjs: Passing parameter in onClick method without performance loss

Question

I am new to React and I have been told that when passing methods to the onClick handler you should not:

use inline arrow functions
call .bind(this, parameter)

As they both will create a new function on every single render, which has implications or performance

In my code I have a parent component sending a method (asideSelected()) as a prop to the child component. In the child component, I want to call this method with a parameter that my parent component receives. I have created the following solution:

Parent:

     export default class App extends Component {
         constructor(props) {
          super(props);
          this.state = {
           selected: ""
         };
         this.asideSelected = this.asideSelected.bind(this);
        }

     asideSelected(selected) {
       this.setState({
       selected: selected
    });
  }
    render() {
        return (
              <Aside
                selected={this.asideSelected}
              />
        );
      }

Child:

export default class Aside extends Component {
  constructor(props) {
        super(props);
        this.selected = this.props.selected.bind(this);
        this.showSelected = this.showSelected.bind(this);
      }

      showSelected(e) {
        let selected = e.target.className;
        this.selected(selected);

      }
      <div className="profile" onClick={this.showSelected} src={chat}></div>
   }

This solution appears to be working, however, so does using inline arrow functions and binding inside of the onClick, I've never seen "bad" re-render and so I don't know if this is actually any different from the other ways of doing it. If it is unclear what I am attempting to do I am using the events target to pass as a parameter instead of doing it directly inside onClick. I am worried that this is a clunky or sub-par solution.

Any input welcome, Thank you

score 0 · Answer 1 · answered Jan 27 '18 at 16:57

0

The render is triggered by the setState().

Any time you update the state: this.setState(), the component and its children will re-render, you may read the doc here

answered Jan 27 '18 at 16:57

OSAMAH

139
3

Thank you for your reply. I worded myself poorly. Yes, the re-rendering that I am getting is the desired result, I was worried about performance loss by calling .bind() or using an arrow function in a JSX prop, which apparently causes unnecessary garbage collection. I was wondering if this could by by-passed as show above. – Atyrian Jan 27 '18 at 17:14

score 0 · Answer 2 · answered Jan 27 '18 at 18:04

It is unusual and unnecessary to bind to functions in the constructor of a react class. When you add a new function in the react object, for instance asideSelected(){ ... } in your example above, this function is bound to the prototype of the react object.

By adding this.asideSelected = this.asideSelected.bind(this); in your constructer, you create a new instance of asideSelected directly to the object. By doing this you add 2x the same functions.

Regarding the arrow functions, that is just ES6 syntax that auto scopes you code to this without the need to use .bind(this). This is just syntactical ES6 magic and should in theory not have any performance hit and makes your code look nicer.

score 0 · Answer 3 · answered Feb 01 '18 at 07:36

Binding should be done in constructor and reason for it given in following link.I am not writing all blog here, because it's little bit lengthy. Let me know, if you don't understand it, then I will try to give more explanation.

Link: https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

Reactjs: Passing parameter in onClick method without performance loss

3 Answers3