#370 Why React Re-Renders
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.
The Study of Shaders with React Three Fiber
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.
Selective Hydration with React 18 and Suspense
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).
Avoiding useEffect with callback refs
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.
React Hooks: useThrottledValue and useThrottledFunction
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
Want to build an open source alternative to Shopify?
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
Would you like to become a sponsor and advertise in one of the issues? Check out our media kit and get in touch.