React and pre-binding functions for performance

Question

I just read this highly enlightening article today:

https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f

The article uses the following example to show how to pre-bind functions to prevent components from needless re-rendering:

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.update = this.update.bind(this);
  }
  update(e) {
    this.props.update(e.target.value);
  }
  render() {
    return <MyInput onChange={this.update} />;
  }
}

This makes sense, though I can't figure out how to pass an argument to the function without using bind or () => this.myFunc('some arg'). Example:

  <div>
    <TextField
      floatingLabelText="Email"
      required
      value={this.state.email}
      onChange={e => this.setState({email: e.target.value})}
    />
  </div>
  <div>
    <TextField
      type="password"
      floatingLabelText="Password"
      required
      value={this.state.password}
      onChange={e => this.setState({password: e.target.value})}
    />
  </div>

I'm not sure how to refactor this to not use binding. I've got this class method as a starting point:

_textChange(field, value) {
  this.setState({
    [field]: value,
  });
}

But I'm not sure how to pass arguments into it from the onChange prop and follow the suggestions laid out by the article above.

Additionally, I have code that I've refactored into this:

export default OrgList = (props) => {
  const orgs = props.orgs.map((org) => {
    const addEditOrg = props.onAddEditOrg.bind(null, org, 'edit');
    const deleteOrg = props.onDeleteOrg.bind(null, org);

    return <TableRow key={org._id}>
      <TableRowColumn>{org.name}</TableRowColumn>
      <TableRowColumn>
        <IconButton onTouchTap={addEditOrg}>
          <ModeEdit />
        </IconButton>
        [...]

But I'm not sure if those pre-bound functions are in the right place. Do they need to be totally outside the component?

medium.com/@john1jan/…

John
– John

2017-03-23 10:49:55 +00:00
Commented Mar 23, 2017 at 10:49 — John
– John, Commented Mar 23, 2017 at 10:49

Dmitri · Accepted Answer · 2016-03-17 08:10:55Z

4

I use name attribute for this. Example:

handleChange(e) {
  this.setState({[e.target.name]: e.target.value})
}

<TextField
  name="email"
  onChange={this.handleChange}
/>

<TextField
  name="password"
  onChange={this.handleChange}
/>

edited Mar 17, 2016 at 8:10

answered Mar 17, 2016 at 2:54

Dmitri

6684 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andreyco · Accepted Answer · 2016-03-07 22:45:13Z

1

Unfortunately, you have to create separate methods which set email/password.

linkState is noop here, since it always returns different object. Same apply to higher order function (returning anonymous function as handler).

I would end up with this code. Event handlers are same, no unnecessary rendering is triggered this way.

setEmail(e) {
  this.setState({email: e.target.value})
}

setPassword(e) {
  this.setState({password: e.target.value})
}

<TextField
  onChange={this.setEmail}
/>

<TextField
  onChange={this.setPassword}
/>

answered Mar 7, 2016 at 22:45

Andreyco

22.9k5 gold badges63 silver badges66 bronze badges

10 Comments

ffxsam Over a year ago

Wow, that's highly unfortunate. What if I had 20 fields? It's a shame we have to choose between performance and code legibility.

ffxsam Over a year ago

PS: if you wouldn't mind, I added on a follow-up question above.

Andreyco Over a year ago

Yep, that's unfortunate. And when we have 20 fields like this,... you have to decide. If it's not causing performance problems, go with linkState. For elements which don't contain any children elements (input, ...) it should be no problem. To answer your extended question: yes. They should be bound outside of your component. Think of stateless function component as a render method in ES6 class or React's stateful component.

ffxsam Over a year ago

But in the second code example (with the map function), it's impossible to bind those functions outside the component, because the arguments passed depend entirely on the org object which changes on each iteration within map.

ffxsam Over a year ago

Why not just use shouldComponentUpdate and stick with binding functions in the event handlers like before?

|

Collectives™ on Stack Overflow

React and pre-binding functions for performance

2 Answers 2

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related