DEV Community: Swyom Sanjog

Virtual DOM

Swyom Sanjog — Tue, 05 May 2026 17:16:31 +0000

Hi everyone, my name is P Swyom Sanjog. Welcome back to my blog—I hope you’re all doing well. Today, I’m bringing a new topic: Virtual DOM. Let’s understand what the Virtual DOM is in simple terms. We’ll cover key questions like what it is, why it’s used, and how it works. So, let’s get started!

Virtual Dom

So, let’s break down the topic into “Virtual” and “DOM.”

Virtual means something that exists digitally it’s not physically present but acts like a copy of a real object.
DOM (Document Object Model), in simple terms it is a programming interface for the web pages and it represents the entire HTML document in a tree structure of objects.

so virtual Dom is a type of interface where it compare the changes with old Dom of the system or in simple term "an interface efficiently tracking changes in a lightweight copy of the real object."

Why the Virtual Dom exist ? what the need of it ?

Imagine you’re editing a document.You just want to change one word, but instead of editing that word, you rewrite the entire page every time. which is a slow process. That’s exactly how the real DOM can behave.

The Virtual DOM is like a smart middle layer.It doesn’t replace the real DOM—it just makes working with more efficient, faster, and smoother.

The virtual Dom is necessary because it make the web apps faster and smarter by avoiding unnecessary updates. lets take a real life example imagine :

Real DOM → Writing directly on the final exam paper.
Virtual DOM → First writing on rough paper then correct the mistakes then write only the final answer .

Simple mini Project based on Virtual DOM concept

result :

When you click the Increment or Decrement button, React doesn’t reload the whole page. Instead of it updates the count using useState, and then quickly creates a new version of the UI in memory this is called the Virtual DOM . It compares this new version with the previous one and notices that only the number has changed. So instead of rebuilding everything, React updates just that small part of the count text on the screen. This makes the app feel fast and smooth because only the necessary change is applied, not the entire UI.

Simple Conclusion

**
React DOM helps in rendering the page on the browser faster than the native HTML pages. By only changing the specific part of the DOM tree rather than re-rendering the entire tree again .

That is the core reason why Virtual DOM manipulation is prefferred over Real DOM manipulation.

The Beginner’s Guide to React Native for Mobile Devlopment

Swyom Sanjog — Sun, 25 Jan 2026 16:59:27 +0000

Hi everyone, once again welcome to my blog. I hope you’re all doing well. I also hope you’ve read my previous blog, where I talked about my project "BookBazaar". However, I didn’t explain the tech stack—what it is and why I chose it. In this blog, I’ll talk about React Native: what it is, why I chose it, and why I didn’t go with Swift or other frameworks. Let’s get started!

What is React Native ?

React native is a powerful and widely used framework for building mobile applications that work on cross-platforms like Android and IOS . Instead of developing separate apps for each platform, developers can write a single codebase and use it on both devices.

In simple terms React Native is a framework that people use to build mobile apps for cross platforms like Android and IOS, making the developers more faster and more efficient it is based on JavaScript and TypeScript and allow developers to create apps that feel smooth and truly native in performance and make user experience more comfortable.

Because of its flexibility, faster development time and strong community supports, React Native has become a popular choice for developers and companies who want to build high-quality mobile apps while saving time, effort and cost .

History of React Native

When Facebook first wanted to bring its service to mobile phones, they didn’t build a native app like most big tech companies. Instead, they used a mobile website built with HTML5. At first, this seemed like a good idea, but over time it caused many problems, especially with performance and user experience. The app felt slow and didn’t work as smoothly as native apps. In 2012, Mark Zuckerberg openly admitted that this was a big mistake, saying that Facebook relied too much on HTML instead of native technology.

Learning from this, Facebook’s developers started looking for a better solution. In 2013, a Facebook engineer named Jordan Walke discovered a new way to create iOS user interfaces using JavaScript. This idea was exciting because JavaScript was mostly used for web development at that time. To explore this further, Facebook organized an internal hackathon to see how much of mobile app development could be done using JavaScript.

This experiment led to the creation of React Native. At first, it was made only for iOS, but later Facebook also added support for Android. In 2015, React Native was shared as an open-source framework so that anyone could use it.

React Native quickly became popular among developers. In just a few years, many developers from around the world started contributing to it on Github. This fast growth showed that developers trust React Native and like using it to build modern mobile apps.

What Make React Native unique ?

React Native is different from tools like Cordova and PhoneGap.
Cordova and PhoneGap mostly show a web page inside a mobile app.
Because of this, apps made with them can feel slow.
React Native does not use web pages inside apps.

Who Should Learn React Native?

Beginners who want to start mobile app development.
Web developers who already know JavaScript.
Developers who want to build apps for both Android and iOS.
Students looking to learn modern and in-demand development skills.

React Native is beginner-friendly and a good choice if you want to build real mobile apps without learning many languages.

How React Native Works (Simple Explanation)

React Native works by letting developers write mobile app code using JavaScript or TypeScript. This code decides how the app looks and behaves. React Native then connects this code with the phone’s native system and turns it into real native components like buttons, text, and views. These components run directly on Android and iOS, just like normal native apps. Because of this, React Native apps feel fast, smooth, and truly native, while developers can still use one codebase for both platforms.

Final Thoughts

React Native is a great choice for beginners who want to start mobile app development. It lets developers build high-quality apps faster using a single codebase. Because it uses real native components, apps feel smooth and perform well. That’s why React Native is trusted by developers and companies all around the world.
This is everything I’ve covered about React Native so far—its basics, history, and how it works according to my knowledge. If I missed anything important, feel free to comment below! I’d love to hear your thoughts and questions. In my next blog, I’ll continue with my BookBazaar project, where I left off, and cover things I couldn’t explain in this post.

That’s all for now. Good night, and happy coding! 🌙🚀

I Started Building My First React Native App – BookBazaar

Swyom Sanjog — Sun, 18 Jan 2026 17:47:40 +0000

Hello everyone 👋
I’m a Computer Science student who recently started learning React Native, and I decided the best way to learn is by building real projects.

So today, I officially started working on my first app called BookBazaar 📚

🤔 What is BookBazaar?

BookBazaar is a book exchange mobile app where users can explore, share, and exchange books.
The goal of this project is not just to build an app—but to learn React Native step by step.

🧭 What I Learned Today

Today, I learned how the navigation system works in React Native.

I explored:

How screens connect with each other

How Stack Navigator manages screen flow

How apps move from Splash → Login → Home

Instead of just watching tutorials, I learned this by actually building the navigation inside my project, which made the concepts much clearer.

🧠 Challenges I Faced

At first, navigation felt confusing:

Too many screens

Errors while navigating

Understanding stack behavior

But after debugging and testing step by step, things started making sense.
This experience reminded me that errors are part of the learning process.

🚀 What’s Next?

Next, I plan to:

Improve the UI

Add Bottom Tab Navigation

Work on authentication & data handling

I’ll keep sharing my progress as I build BookBazaar.

🤝 Let’s Connect

If you’re also learning React Native or building your first app:

Drop your suggestions 💬

Share your experience

Follow me for more updates on my dev journey 🚀

Thanks for reading! 😊