Our journey through performance is finished and we can now optimize our applications to give users a better UX.
In this chapter, we learned how the reconciliation algorithm works and how React always tries to take the shortest path to apply changes to the DOM. We can also help the library to optimize its job by using the keys.
Always remember to use the production version of React when benchmarking with the Perf add-on to find the parts of your application that need optimization.
Once you've found your bottlenecks, you can apply one the techniques we have seen in this chapter to fix the issue. One of the first tools you can use is to extend the PureComponent and use immutable data to make your component re-render only when strictly needed.
Don't forget to avoid the common mistakes that make the PureComponent less effective, such as generating new functions inside the render method, or using constant as props.
We have learned how refactoring and designing your components structure in the...