Why React Re-Renders

#370 – August 22, 2022

sponsor

Does creating a beautiful and functional Heatmap Chart in less than 50 lines of React code sound mystical? And, yes, this includes the imports and component boilerplate. Here's a blog that reveals the mystery.

this week's favorite

So, I'll be honest. I had been working professionally with React for years without really understanding how React's re-rendering process worked.

When writing my first Three.js scene from start to finish in Building a Vaporwave scene with Three.js, I felt an immense sense of achievement. However, all I really did in this project was glue a couple of PNGs and maps I drew on Figma onto a plane and make the scene move.

Interaction to Next Paint (INP) measures your site’s responsiveness to user interactions on the page. The faster your page responds to user input – the better. INP is an experimental metric to develop a better way of measuring responsiveness than First Input Delay (FID).

Even though refs are mutable containers where we can theoretically store arbitrary values, they are most often used to get access to a DOM node.

This article explains the new React 18 hooks useDeferredValue and useTransition and compares them to throttle and debounce functions. It also presents two similar custom hooks, useThrottledValue and useThrottledFunction, which can be used to throttle a function or value change when the React hooks isn't sufficient.

jobs

Medusa, the most popular JS-based e-commerce platform on GitHub, just raised an $8M seed round and is looking to expand their team. Check out their open positions.

newsletters