# ref.current : Why is often null?

When working with React, especially when using **refs**, many developers run into this common issue:

> "Why is `ref.current` null even though I just attached it to a DOM element?"

Let’s clear up the confusion by understanding how React updates the UI in **two distinct phases**:

1. Render
    
2. Commit
    

Imagine React is like a builder and a Planner who building a house (your UI). It does it in two steps:

---

1. **Planning Phase (Render)**
    

React (the architect) is planning:

* “Where should the doors go?”
    
* “Where should the windows be?”
    

But

* The house isn’t **build yet.**
    
* So if you try to “open a door” during this step, it won't work — it **doesn’t exist yet**!
    

This is like trying to access `ref.current` during rendering — it's either `null` or not correct yet.

---

2. **Building Phase (Commit)**
    

Now React (the builder) actually builds:

* Puts the doors, windows, roof, etc., in place.
    
* Once the house is done, you can now open the door!
    

his is like after the DOM is built — your `ref.current` now points to the real thing.

---

Let’s visualise this steps:

```plaintext
[Render Phase] (Planning)
------------------------------------------------
| React runs your components                  |
| No DOM yet (just planning)                  |
| ref.current = null or old value             |
------------------------------------------------

[Commit Phase] (Building)
------------------------------------------------
| React updates the DOM                       |
| - First, it clears old refs (null them out) |
| - Then, builds DOM elements                 |
| - Then, sets ref.current to new elements    |
------------------------------------------------
```

That’s all for today. Feel free to share your thoughts or questions if you found this article helpful.