React Design Patterns and Best Practices

Summary

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. ...