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.

The setup

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.

Understanding JSX

React encourages developers to write components using JSX as the rendering logic is inherently coupled with other UI logic. …

Younes Zadi

Software engineer by night 🌃, carot farmer by day 🥕

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store