Am I Overreacting? Or is React Over-Reacting?
<p><em>As expected, there’s been a lot of focus on the specific example presented. While some of these criticisms are valid, the point of the article is not the specific behaviour demonstrated. Instead it’s about demonstrating the expense of a single React render with a large number of elements and showing how many additional layers you need to add to undo the automatic rendering that React is providing. If I can come up with a better example I may do a follow-up.</em></p>
<p>The code for this article can be found <a href="https://github.com/adamjberg/react-overreact" rel="noopener ugc nofollow" target="_blank">here</a>.</p>
<p>When I first started doing web development, it was primarily with Python/Django. Everything was server side rendered and not once did I ever think about “rendering performance”. 10 years later and with computers at least twice as fast, rendering performance is now more of an issue than it ever has been. Single Page Apps (SPAs) and frontend libraries like React have encouraged and enabled highly dynamic web pages. Unfortunately, in my experience, the default recommended way to write React code does not actually support highly dynamic pages very well.</p>
<p>In this post I will explore the problems that come with standard React code, the recommended options for improving React performance, and finally counter these with examples in vanilla JS.</p>
<h2>What We’re Building</h2>
<p>Coming up with a succinct example is difficult as it is really the complexities of a real project that better demonstrate how everything comes together. This post will walk through a basic “dynamic” example that highlights how React performs when state is frequently changing. The example is 500 text divs that have their background color updated when one of the elements is hovered over. After each set of changes I will include the source code and screenshots of the profiler to show how much time React is spending rendering.</p>
<p><a href="https://levelup.gitconnected.com/am-i-overreacting-or-is-react-over-reacting-d3e7d0cb4d37">Website</a></p>