Relatable Code

Share this post

How does React re-render work?

relatablecode.substack.com

How does React re-render work?

This week we check out an article of how React re-render works and understanding Critical CSS

Diego Ballesteros
Oct 10, 2022
Share this post

How does React re-render work?

relatablecode.substack.com
React (@reactjs) / Twitter

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/

Twitter avatar for @csswizardry
Harry Roberts @csswizardry
📖 I’ve been working on this for, well, years I suppose. I’ve finally written up my thoughts on Critical CSS: csswizardry.com/2022/09/critic…
csswizardry.comCritical CSS? Not So Fast! – CSS WizardryHow helpful is Critical CSS?
3:09 PM ∙ Sep 6, 2022
324Likes84Retweets

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

  • Billboard.js (chart library) released a react wrapper

  • create-t3-app is an interactive CLI to setup a full-stack react project

  • New boilerplate for React/Typescript built on top of Vite

  • v5 Release for React number Format

🔧 Other

  • Axios updates to version 1.0

  • Ten years of TypeScript

  • The Future of the Web is on the Edge

  • I changed my mind about writing new JavaScript frameworks

  • Increasing Test coverage - case study

  • Creative List Styling

Share this post

How does React re-render work?

relatablecode.substack.com
Comments
TopNew

No posts

Ready for more?

© 2023 Diego Ballesteros
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing