How does React re-render work?
Discover more from Relatable Code
How does React re-render work?
This week we check out an article of how React re-render works and understanding Critical CSS
This neat article I found (from 2020 though) is a fairly complete guide on how React re-renders. React rerenders are directly responsible for a lot of the performance issues that a React application may or may not have.
Although most of the time it is overstated how these rerenders affect the performance (most of the time React, under-the-hood is very efficient with dealing with re-renders), it is still important to understand how it works and all the intricacies involved.
I definitely recommend checking out the full article below as it serves as a good reminder of how it works and you may even learn a thing or two!
Full Article: https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/
Harry Roberts wrote an interesting guide on understanding critical CSS.
What is critical CSS?
Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible. Above-the-fold is all the content a viewer sees on page load, before scrolling.
- web.dev
Essentially, if its an old project its best to avoid the headache of trying to adapt it to a critical CSS pattern. Furthermore, in new projects a lot of the believed-to-be standard techniques of using the `media` feature may not be as beneficial as previously thought.
Check out the full article for more details!
📦 More interesting Articles
⚛ React
🔧 Other