How to solve the pure render/function binding pr0blem in vanilla React? - performance

Question

Let's start with some code:
export default class BookingDriverContainer extends React.PureComponent {
static propTypes = {
bookingId: PropTypes.number.isRequired,
};
constructor(props) {
super(props);
this.state = {
loading: true,
saving: false,
};
}
componentDidMount() {
ajax(Router.route('api.bookingDrivers', {
id: this.props.bookingId,
})).then(res => {
if(res.ok) {
this.setState({
loading: false,
segments: res.data.segments,
drivers: res.data.drivers,
});
}
});
}
driverChanged = segmentId => ev => {
console.log(`Driver for segment ${segmentId} changed to ${ev.target.value}`);
};
render() {
if(this.state.loading) {
return <img src={loadingGif} width="220" height="20" alt="Loading..."/>;
}
return (
<table className="index-table">
<thead>
<tr>
<th style={{width: '50px'}}>Seg.</th>
<th style={{width: '70px'}}>Unit</th>
<th style={{width: '140px'}}>Driver</th>
<th style={{width: '100px'}}>Driver #</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{this.state.segments.map(seg => (
<tr key={seg.id}>
<td>*snip*</td>
<td>*snip*</td>
<td>
<SelectBox onChange={this.driverChanged(seg.id)}>
<option value="" className="not-set">TBD</option>
{this.state.drivers.map(([id, name]) => (
<option key={id} value={id}>{name}</option>
))}
</SelectBox>
</td>
<td>*snip*</td>
<td>*snip*</td>
</tr>
))}
</tbody>
</table>
)
}
}
In this example, my component is not pure because of this: onChange={this.driverChanged(seg.id)}. i.e., every time my component renders, that creates a new function, which will cause <SelectBox> to be re-rendered even though nothing has changed.
How can this be fixed without introducing a large framework like Redux?

Answer 1

Best way I've found so far is just to memoize the function.
driverChanged = memoize(segmentId => ev => {
// ...
});
This way, given the same segmentId it will return the same function instance, which will allow the PureRenderMixin et al. to work their magic.
Here's my memoize function:
export default function memoize(fn, options={
serialize: fn.length === 1 ? x => x : (...args) => JSON.stringify(args),
}) {
let cache = new Map();
return (...args) => {
let key = options.serialize(...args);
if(cache.has(key)) {
return cache.get(key);
}
let value = fn(...args);
cache.set(key, value);
return value;
}
}
It only supports JSON-serializable variables, but you can find a more advanced memoizer on npm if you wish.

Answer 2

If all you want is to prevent creating new functions every time the component renders, you could simply create another component to contain SelectBox component:
class MySelectBox extends React.Component {
static propTypes = {
drivers: PropTypes.arrayOf(PropTypes.object).isRequired,
segId: PropTypes.string.isRequired,
driverChanged: PropTypes.function.isRequired,
}
render() {
const {
drivers,
segId,
driverChanged,
} = this.props;
return (
<SelectBox onChange={ev => driverChanged(ev, segId)}>
<option value="" className="not-set">TBD</option>
{drivers.map(([id, name]) => (
<option key={id} value={id}>{name}</option>
))}
</SelectBox>
);
}
}
Then use this new component inside BookingDriverContainer with the proper properties:
export default class BookingDriverContainer extends React.Component {
// ...
driverChanged = (ev, segId) => {
console.log(`Driver for segment ${segId} changed to ${ev.target.value}`);
}
render() {
// ...
return (
<table className="index-table">
<thead>
{/* ... */}
</thead>
<tbody>
{this.state.segments.map(seg => (
<tr key={seg.id}>
<td>*snip*</td>
<td>*snip*</td>
<td>
<MySelectBox
driverChanged={this.driverChanged}
segId={seg.id}
drivers={this.state.drivers}
/>
</td>
<td>*snip*</td>
<td>*snip*</td>
</tr>
))}
</tbody>
</table>
)
}
}
This way you do not create new functions at every render times.