HOW REACT'S RENDER, EFFECTS, AND REFS WORK UNDER THE HOOD

Summary from the TLDR Web Dev newsletter

This article explains React's rendering process, focusing on how `render`, `useEffect`, `useLayoutEffect`, and refs work together. There are two phases of rendering: the render phase (creating a virtual DOM and diffing it against the previous one) and the commit phase (updating the actual DOM and running effects). The use of the virtual DOM allows for efficient updates and cross-platform rendering. There are differences in using `useEffect` and `useLayoutEffect` for timing DOM manipulations.