Complete guide to React Native Fundamentals

The Virtual DOM

Do you know how to write a JavaScript function? If you do, that’s great! You’re well on your way to understand how React and React Native work under the hood. What do we mean exactly? Well, when you research how React works, you’ll eventually encounter someone explaining it in the following manner:

UI = f(data)

You may say, Nerd alert! How is this helpful? Well, it’s saying that your UI is a function of your data. To put it in more familiar terms, let’s say that:

var todos = function(data) { return data.join( " -- " ) }

You can call the function with an array of data, such as:

var ui = todos( ["wake up", "get out of bed", "drag a comb across my head"] );

This is not a particularly earth-shattering code; however, you’re now rendering some content, in this case to the console.

What if, all your UI rendering code could be this predictable? It can be! Let’s start getting a little more advanced. What if, in addition to our todos() function, we had a function called todoItem(), such as:

var todoItem = function(data) { return "<strong>" + data + "</strong>" }

That looks a lot like our original UI function, doesn’t it?:

UI = f(data)

What if we start composing our todos() and todoItems(), such as:

var ui = todos( [todoItem("wake up"), todoItem("get out of bed")] );

You can start to get the picture that we can start to render more and more complex outputs by composing simple functions.

What if we want to start rendering our content to the browser? I’m sure you can imagine changing our todoItem() to add elements to the DOM using jQuery; however, in this case we will start repeating ourselves a lot with many instances of appendChild() calls and jQuery selectors. If we are really smart, we might write a framework to abstract away the DOM manipulations so that we can write the code that matters to our application, not just the code that matters to the browser.

OK, so now let’s say that we’ve magically got a framework that lets us represent our UI as a data function and we don’t have to think about how our content will get rendered to the DOM. We can start changing our data over and over and watch the DOM update! That sounds great in theory, but when we have dozens of div elements in a deeply nested hierarchy, the underlying DOM manipulations become complex and inefficient.

What if our magic framework had an intermediate representation of the DOM? Let’s call it Virtual DOM and let’s say that instead of making every little change to the DOM, we batch the changes together. We can even compare the before and after states of the Virtual DOM. Figure out the differences and reduce the number of real DOM manipulations that we need to perform. Now we’re really on to something!

So we can now express our UI as a function of our data. We don’t have to think about the underlying DOM manipulation code and our UI is nice and snappy because the underlying framework is really smart and reduces the number of DOM manipulations it needs to perform. It will be pretty great to have a framework that could do that for us, but you know what will be really cool? What if the DOM didn’t have to be a browser DOM? What if that same abstraction that allows us to write the code that matters to our app could be used to, say, update native mobile components? Enter React Native.

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Get The best In Web dev

Get The best In Web dev

Join dunebook and recieve best in Angular, React, Vue, Python, Java & more. Directly to your inbox once a week FREE !

You have Successfully Subscribed!

Pin It on Pinterest