React & Modern Frontend (445 Qs)•Part 8: Advanced React Patterns, Portals & Performance (152 - 261)
What are the problems of using render props with pure components?
If you create a function inside a render method, it negates the purpose of pure component. Because the shallow prop comparison will always return false for new props, and each render in this case will generate a new value for the render prop. You can solve this issue by defining the render function as instance method.
javascript
class Mouse extends React.PureComponent {
render() {
// BAD: a new arrow function reference is created on every render,
// so PureComponent's shallow comparison always sees "new" props
return <MouseTracker render={(mouse) => <Cat mouse={mouse} />} />;
}
}
javascript
class MouseWithCat extends React.PureComponent {
// GOOD: defined once as an instance method/class property, so the
// reference stays stable across renders
renderTheCat = (mouse) => <Cat mouse={mouse} />;
render() {
return <MouseTracker render={this.renderTheCat} />;
}
}