Now that we have taken a look at the React internals (see part 1), we can start having fun with some real-life examples. In this second part of the article, we will analyze the most known mistakes that cause unnecessary re-renders or mounting/unmounting in React and eventually lead to a sluggish application.
In this article, we are going to use the React Developer Tools extension to profile the behavior of our components.
React DevTools draws a border around components that have been updated.
In this two-part article, we will take a look at common mistakes that hurt the performance of a React app badly.
But before taking a look at these mistakes and how to solve them, we need to understand the React internals, more precisely we need to understand how JSX and the reconciliation algorithm work in React. This will be the subject of part 1 of this article; so let’s dive in.
React encourages developers to write components using JSX as the rendering logic is inherently coupled with other UI logic. …