Performance Degradation
Learn about the performance degradation in React, specifically examining the impact of intensive calculations in function components.
Efficiency deterioration
When we build a site, we normally start it with a draft or prototype version where a couple of pages are laid out with the sample data and the preliminary logic. The idea is to start small and see whether the site has any potential to grow. Though this is a very common approach, interestingly, most of the performance-related issues do not show up at this point.
When a site with real business logic grows, we start to experience performance degradation issues. Understanding how these issues are created is valuable since it helps us plan for the site's growth.
Evaluating lightweight state changes
Let's build such a case from scratch. A variable defined inside the body of a function component is evaluated when it gets invoked:
const Title = ({ text }) => {const a = 1...}
In the preceding code, the a variable is assigned with a 1 constant. The variable a is reinitialized to 1 each time the component re-renders, which occurs whenever the text ...