The effective performance of a web application is critical to providing a good user experience and improving conversions. The React library implements different techniques to render our components fast and to touch the Document Object Model (DOM) as little as possible. Applying changes to the DOM is usually expensive and so minimizing the number of operations is crucial.

However, there are some particular scenarios where React cannot optimize the process, and it's up to the developer to implement specific solutions to make the application run smoothly.

In this chapter, we will go through the basic concepts of React and we will learn how to use some APIs to help the library find the optimal path to update the DOM without degrading the user experience. We will also see some common mistakes that can harm our applications and make them slower.

Through the simple examples in this chapter, you will learn about the tools that we can import into our code base to monitor performance and find bottlenecks. We will also see how immutability and PureComponent are the perfect tools to build fast React applications.

We should avoid optimizing our components for the sake of it, and it is important to apply the techniques that we will see in the following sections only when they are needed.

In this chapter, we will cover the following topics:

• How reconciliation works and how we can help React do a better job using the keys
• How using the production version of React makes the library faster
• What shouldComponentUpdate and PureComponent can do for us and how to use them
• Common optimization techniques and common performance-related mistakes
• What it means to use immutable data and how to do it
• Useful tools and libraries to make our applications run faster