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:

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