React Charts Made Easy

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.

Why React Re-Renders

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

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.

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.

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.

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).

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.