Performance degradation

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 the site with the real business logic grows, we start to experience performance degradation issues. Understanding how these issues are created in the first place is valuable since it helps us plan for the growth of the site.

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. Storing a number like this shouldn't cost us much when a is reassigned every time when...