Optimization of rendering visualization using the Partial Application function

Question

The response of the components compares the details with the equivalent of a reference to objects, and when you partially apply a function, you get a new function with another link, which forces the response component to re-render each time.

Has anyone encountered this issue?

I have a function that displays a component on a specific tab. And one of the details is this.setTab.bind(this, tab) , which returns a new function every time. It would be great if there would be some kind of immutability assistant that allows him to be equal based on the associated value ...

Answer 1

I get this straight from the documents of the eslint plugin "jsx-no-bind" , and it mentions one of the possible solutions for decreasing the number:

---

A common example of using bind in rendering is list rendering to have a separate callback for the list item:

 var List = React.createClass({ render() { return ( <ul> {this.props.items.map(item => <li key={item.id} onClick={this.props.onItemClick.bind(null, item.id)}> ... </li> )} </ul> ); } }); 

Instead of doing it this way, pull the repeating section into your own component:

 var List = React.createClass({ render() { return ( <ul> {this.props.items.map(item => <ListItem key={item.id} item={item} onItemClick={this.props.onItemClick} /> )} </ul> ); } }); var ListItem = React.createClass({ render() { return ( <li onClick={this._onClick}> ... </li> ); }, _onClick() { this.props.onItemClick(this.props.item.id); } }); 

This will speed up the rendering, since it avoids the need to create new functions (via bind calls) for each rendering.

Answer 2

If your render function relies only on data from this.props and this.state , you can implement the shouldComponentUpdate method to compare old and new details and state, thus telling React exactly when the handler has not changed to prevent unnecessary re-renderings.

Take this with caution: if your logic in shouldComponentUpdate is wrong (so it returns false when something really changed), your component will stop updating. These errors are hard to find later, so be careful. (Use the profiler to see if you really need this particular performance boost.)