shoudComponentUpdate(nextProps, nextState) {
if (/* You want to update */) {
return true
}
return false
}
Slide 13
Slide 13 text
Pure Render Optimization
shoudComponentUpdate(nextProps, nextState) {
return (
!shallowEqual(nextProps, this.props) ||
!shallowEqual(nextState, this.state)
)
}
class extends React.PureComponent {
// ...
}
or
Slide 14
Slide 14 text
Anti Pure Render
render() {
return (
{}}
funcBind={func.bind(this)}
arrayLiteral={[]}
newArray={map(…)}
objectLiteral={{}}
newObject={assign({}, …)}
>
)
}
Slide 15
Slide 15 text
Static View Optimization
import StaticContainer from 'react-static-container'
shoudComponentUpdate() {
return false
}
or
Slide 16
Slide 16 text
React Internal Bailout
• Bailout when prevElement === nextElement
• Don’t bailout when prevContext !== nextContext
• React always create a new context
• Don’t use setState() and getChildContext() in one
component
React Fiber
• Is still experimental
• Prioritization
• Return multiple elements from render
• Try it now:
npm i [email protected]
import ReactDOMFiber from 'react-dom/fiber'