React

The prevalence of component libraries and an increasingly large ecosystem of tools for building web applications has provided a litany of choices for developers looking to build modern web applications. When I started programming with React a few years ago I began making single page applications using the ever-popular react-router for routing between pages of my application. This didn’t change much as I began to build more complex applications as it scaled well enough for my needs. ...

One of the key challenges in building efficient React applications falls on managing state updates effectively. This is typically the largest problem that occurs when a React application grows in size and complexity. In this post, I’ll explore how incorrectly managed state updates can lead to performance issues and how to mitigate these problems using popular state management libraries and techniques. When you look at a typical React application (not a static website) you will often find that the depth of the component tree can grow very large. A tree with many nested components is the first and most probable cause of performance issues. If any component high up in the tree updates its state every component below it in the tree will re-render as well. If your application performs a lot of operations when a component renders or is re-rendered this can lead to a very sluggish user experience with a single page change causing multiple seconds of lag. ...