📌 Missed Day 7? I explored why sibling components can't share state directly, how lifting state up works, and why moving state to the parent makes component communication much cleaner. You can **read it here* and then come back. I'll wait. ☕️*
For the past few days, React has been doing almost everything for me.
Rendering components...
Updating the UI...
Handling state...
Managing events...
I barely had to think about the browser itself.
Today, that changed.
I needed something React usually hides from us.
The actual DOM.
That was my introduction to useRef().
But what surprised me even more was what came after that.
Once I understood useRef, learning React Hook Form suddenly made a lot more sense.
Let's dive in. 🚀
🧠 Quick Recap
Yesterday's big question was:
How do multiple components share the same state?
Here's what I took away from Day 7:
- ⬆️ Shared state belongs in the nearest common parent.
- 📨 Props can pass both data and functions.
- 👨👧 Sibling components can't directly access each other's state.
- 🧩 React's data always flows from parent to child.
Today we're answering a different question:
If React has a Virtual DOM... how do we access the real DOM? 🤔
🌳 React Doesn't Work Directly with the Browser
One thing I learned today is that React usually protects us from working with the real DOM.
Normally, when we write React code, we're interacting with React itself.
Not directly with the browser.
The flow looks something like this.
My Code
↓
React
↓
Virtual DOM
↓
Real DOM
That means most of the time, React decides when and how the browser should update.
We don't touch the DOM ourselves.
🎯 What Exactly Is the Real DOM?
The Real DOM is simply the actual webpage the browser creates.
Every button...
Every heading...
Every input...
Everything you see on the screen exists inside the browser's Document Object Model (DOM).
That's also where browser APIs and events live.
Real DOM
├── Document
├── Elements
├── Browser APIs
└── Native Events
React normally keeps us away from it.
But sometimes...
We genuinely need access to it.
🎭 React Doesn't Even Give Us Native Events
This part surprised me.
When we write something like:
<button onClick={handleClick}>
We're not actually working with the browser's native event directly.
React wraps browser events into something called Synthetic Events.
The idea looks something like this:
Browser Event
↓
React Wraps It
↓
Synthetic Event
↓
Our Event Handler
That wrapper helps React provide a consistent experience across different browsers.
Another example of React hiding browser details from us.
🎣 So... How Do We Reach the Real DOM?
That's exactly why React provides another Hook.
const inputRef = useRef();
Instead of storing state...
useRef() stores a reference.
That reference can point to a real DOM element.
Then we connect it like this.
<input ref={inputRef} />
Now React gives us access to that input element whenever we need it.
📝 Building a Form with useRef()
Today's first form didn't use controlled inputs.
Instead, every input stored a reference.
Something like this:
ref={(element) => (formRef.current.productName = element)}
Then, when the form was submitted...
I could read the values directly.
const product = {
pName: formRef.current.productName.value,
price: formRef.current.price.value,
category: formRef.current.category.value,
};
It actually worked really well.
Seeing values come directly from the DOM was pretty interesting.
🤔 But Something Started Feeling Repetitive...
As I added more inputs...
I noticed something.
Every field needed another reference.
formRef.current.productName
formRef.current.price
formRef.current.category
formRef.current.image
The larger the form became...
The more repetitive the code felt.
And that's when today's second topic entered the picture.
🚀 Enter React Hook Form
After writing a form manually...
I tried building the same thing using React Hook Form.
The first step was installing the package.
Then everything started with:
const {
register,
handleSubmit,
reset,
} = useForm();
One thing I liked immediately was that I could destructure only the things I actually needed.
✨ register() Felt Like Magic
Instead of creating references manually...
Every input simply used register().
<input
{...register("productName")}
/>
That's it.
No manual refs.
No repeated logic.
Every field automatically became part of the form.
That looked much cleaner.
📤 Submitting the Form Became Simpler Too
Instead of collecting every value manually...
React Hook Form handed everything to me.
const formSubmit = (data) => {
console.log(data);
reset();
};
The data object already contained every input value.
No need to write:
formRef.current.name.value
over and over again.
That was probably my favorite part.
🔄 Comparing the Two Approaches
Here's how I think about them now.
Using useRef()
Create Ref
↓
Attach Ref
↓
Access .current
↓
Read Value
Using React Hook Form
register()
↓
handleSubmit()
↓
Receive Form Data
↓
Done ✅
Both approaches work.
One simply removes a lot of repetitive work.
💡 My Mental Model
Here's how today's lesson connects in my head.
React Hides the DOM
↓
Need Direct Access?
↓
useRef()
↓
Building Bigger Forms?
↓
React Hook Form
That simple flow helped everything click.
💡 My Biggest Takeaways Today
- 🎣
useRef()lets React keep a reference to a real DOM element. - 🌳 React normally works with the Virtual DOM instead of the Real DOM.
- 🎭 React wraps browser events into Synthetic Events.
- 📝 Forms built with
useRef()work well but become repetitive as they grow. - 🚀 React Hook Form removes much of that repetitive code.
- 📦
register(),handleSubmit(), andreset()make form handling much cleaner.
📚 Learning Source
I'm currently learning React through the React Cohort 3.0 by Devendra Dhote at Sheriyans Coding School.
This article isn't a copy of the course.
It's my personal understanding after today's class, rewritten entirely in my own words.
Writing these articles helps me reinforce what I've learned, and hopefully helps other beginners who are on the same journey. 🤝
If I've misunderstood something, I'd genuinely appreciate your corrections in the comments. 😊
🙌 Final Thoughts
Today's class answered a question I hadn't really thought about before.
React usually keeps us away from the browser.
Most of the time, that's exactly what we want.
But sometimes...
We genuinely need access to the real DOM.
That's where useRef() comes in.
And after using it to build a form manually, I could immediately appreciate why libraries like React Hook Form exist.
They don't replace React.
They simply remove a lot of repetitive work while still using React's ideas under the hood.
I feel like today's lesson wasn't just about learning another Hook.
It was about understanding where React stops... and where we occasionally need to work a little closer to the browser.
See you on Day 9! 🚀
💬 When did useRef() finally click for you? Was it focusing an input, reading form values, or something completely different? I'd love to hear your experience in the comments. 😊
I'd love to hear your experience in the comments. 😊
If you're following along with this series, you can also find me on GitHub, where I'll be sharing my projects and documenting my progress.
Bismay-exe (Bismay.exe) · GitHub
👋 Hi, I’m Bismay 💻 Developer passionate about building clean, minimal, and elegant apps 🚀 Focused on coding 🌱 Always learning, creating & new ideas - Bismay-exe
github.com
🤖 AI Disclosure: This article is based on my own React learning journey, class notes, code experiments, and understanding. I used ChatGPT to help improve the writing, structure, and readability of this post. I reviewed and verified the technical explanations before publishing, and I take responsibility for everything shared here.
Thanks for reading! 🚀
Top comments (1)
This is a great breakdown! I'm curious if