Please enable JavaScript.
Coggle requires JavaScript to display documents.
09. IMPROVE THE PERFORMANCE OF YOUR APPLICATIONS (Should component update,…
09. IMPROVE THE PERFORMANCE OF YOUR APPLICATIONS
Reconciliation and keys
React does this because it just checks the equality of the children and, if it finds that the first one is different, it changes all the items of the list as if they were new
react-addons-perf
Optimization techniques
NODE_ENV='production'
Minify JS files
Should component update
In fact, to find out the necessary steps to reduce the DOM operations, React, has to fire the render methods of all the components and compare the results with the previous ones
Extend React.PureComponent instead of
React.Component when we create our component classes
It's should be used only after the application has been monitored and the bottleneck has been found
Stateless functional components
They perform even worse because it is not possible to use the shouldComponentUpdate method which as we have seen before, can help React render the tree faster
why-did-you-update
The reason React thinks that we are passing a new function on every render is because the arrow function returns a newly created function every time it is invoked, even if the implementation remains the same
Constants props
Tools and libraries
Immutability
Monitoring tools
chrome-react-perf
react-perf-tool
Babel plugins
React constant elements transformer
React inline
elements transform