How our childhood prepared us to code in React!
How painting, building, and tinkering as kids mirror the way React works today.
Last night, just before going to bed, I decided to sit down and paint. I kept the idea simple: a quiet landscape with trees, a mountain, a river, the open sky, and a small house. The little house had a few windows, a chimney, and a sloping roof. I began by sketching the outlines in pencil, then chose the colors I wanted to bring it to life. Since the trees and the ground shared the same shade, I started there, reusing the same brush. Once that was done, I washed the brush and moved on to the sky and river, gradually building the base of the painting. Finally, with my unsteady pencil strokes and a touch of black and white paint, I added some shading to give the scene depth and character.
Over time, this has become a daily ritual for me—a form of meditation that I practice before going to sleep. It brings me peace, helps me slow down, and strengthens my mind. But in the quiet of this routine, I stumbled upon an epiphany.
Painting feels a lot like React
Painting, I realized, is a lot like coding in React. Each element—whether a tree, a river, or a house—represents a component, designed to be understood and reused independently. The brushes and colors are applied thoughtfully, much like styling, to create a cohesive design. Just as I washed and reused my brush across different parts of the canvas, React reuses hooks and components to keep things modular and efficient.
When I added shading, the scene transformed—it gained depth, mood, and realism. This felt like working with state and props in React: subtle changes that ripple through the application, giving it life.
Where the Virtual DOM comes in
But the most striking parallel came when I thought about corrections. In painting, before I repaint or adjust something, I often sketch it lightly in pencil or imagine it on a rough sheet—just to see how it fits. Only once I’m confident do I commit the final strokes on canvas.
This is exactly how React uses the Virtual DOM (V-DOM). Think of the V-DOM as a lightweight, in-memory copy of the actual UI. It exists in JavaScript memory, not in the browser’s real DOM, and acts as a “draft layer” of the interface. Meanwhile, the Real DOM (R-DOM) is the actual browser-rendered UI that the user sees.
Whenever a component’s state or props change, React first updates the Virtual DOM. This is quick because it’s just JavaScript objects being updated in memory. React then runs a diffing algorithm, comparing the new V-DOM (after the update) with the previous V-DOM. This lets React figure out exactly what has changed.
Once the differences are identified, React updates only those specific parts in the Real DOM. This is more efficient than re-rendering the entire UI—like a painter touching up only the leaves of a tree instead of repainting the entire canvas.
Interaction between V-DOM and R-DOM:
V-DOM exists in memory (JS objects).
R-DOM exists in the browser (what the user sees).
Updates first happen in the V-DOM.
React calculates the minimal set of changes (diffing).
Only those changes are applied to the R-DOM.
This approach is why React apps feel fast and responsive even when UIs are complex—because updating the V-DOM is cheap, and only necessary changes touch the Real DOM.
A colorful world of analogies
This realization made coding in React feel more colorful, creative, and almost artistic. It’s not just logic and syntax—it’s composition, reuse, and attention to detail, much like art. And perhaps, by exploring the world through such analogies, we can make technology not only easier to understand but also more joyful to practice.
A small tabular approach for making our newfound understanding better :)
| Painting Step | React Equivalent |
| Sketching outlines of trees, a river, and a house | Defining components |
| Choosing brushes & colors for different areas | Applying styling (CSS) |
| Reusing the same brush for tree + ground | Reusing components & hooks |
| Adding shading to give depth | Managing state & props |
| Making a rough draft before the final stroke | Updating the Virtual DOM (V-DOM) |
| Comparing the draft with the current canvas | Diffing algorithm |
| Touching up only the leaves instead of repainting everything | Updating only changed nodes in the Real DOM (R-DOM) |
This marks the beginning of our React analogy series. Today, we explored the concept of the Virtual DOM through the lens of painting, making it easier to connect abstract technical ideas with something more tangible. In the next posts, we’ll gradually move into the foundational concepts of React—from components and props to state management and beyond. Step by step, we’ll build not just applications, but also a colorful way of understanding them.
