# How our childhood prepared us to code in React!

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**:

1. **V-DOM exists in memory (JS objects)**.
    
2. **R-DOM exists in the browser (what the user sees)**.
    
3. Updates first happen in the V-DOM.
    
4. React calculates the minimal set of changes (diffing).
    
5. 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.