How React really works

I really helps to understand how something works that you're using to ensure that you are using it correctly. So how does React work? Lets not forget that React is a JavaScript library for building user interfaces. React is all about components. We use components to build those user interfaces, and React embraces this component concept. It uses components to effectively compose user interfaces and it uses components to effectively update user interfaces.

There's one important note: we also saw this ReactDOM thing and in the end ReactDOM is your interface to the web. React itself. React.js does not know the web. It does know nothing about the browser in the end. React knows how to work with components but it doesn't care wheter those components contain HTML elements or if they contain totally fictional elements, that does not matter to React. It's ReactDOM to which that matters in the end and which ultimately needs to bring real HTML elements to the screen.

But React is just a library that manages components, that manages state and that manage different components states and that finds out how components might need to change and which differences you might have from a previous state of a component compared to the current state. And React hands all that information regarding what changed and what should be visible on the screen no matter what screen that is.

React only cares about components and props, which is basically data you pass to components to make components configurable and to enable parent-child component communication. Also React cares about state which is internal data inside of a component and React cares about context which is component-wide data. Now of course, React has a couple of other features built in as well, but these are the core features.

Whenever props, state or context changes, components that use these concepts are updated by React and React checks wheter this component now wants to draw something new onto the screen. So therefore, if we have a close look at that components real DOM cummunication here, the question of course is, how exactly does this work? As we mentioned, React is concerned about components and what React in the end does is, it uses a concept called the virtual DOM.

React determines how the component tree currently looks like and what it should look like, for example, after a state update. ReactDOM receives the differences (i.e. required changes) and then manipulates the real DOM. Whenever state props, or a context of a component changes, that component function is re-executed, that component is re-evaluated by React. But it is worth noting that reevaluating a component is not the same as rerendering the DOM. So just because a component function is re-executed by React does not mean that the respective part of the actual real DOM is re-rendered or re-evaluated.

Our components as we saw, are re-evaluated whener props, state or context changes, so React then executes that component function again. Now the real DOM on the other hand is only updated in the places where it needs to be changed, so the changes to the real DOM are only made for differences between evaluations. So the real DOM is not changed all the time, it's changed rarely and only when needed. And that's important for performance because making a virtual comparison between the previous state and the current state, that's fairly cheap and easy to do.

Reaching out to the real DOM, that's rendered in the browser is pretty expensive from a performance perspective, because working with the real DOM just turns out to be a performance intensive task. Of course not a tiny change in one place, but if you do that tiny change in a lot of places all the time, then your page might become slow because you're working with the real DOM too much.

So let's say that when the component function ran the last time is this:

<div> <h1>Hi there!</h1> </div>

And now some state changes and all of a sudden we wanna show is a new paragraph, like in the following example:

<div> <h1>Hi there!</h1> <p>This is new!</p> </div>

In this case, React would determine that the difference between both snapshots is this paragraph and it would report does change to ReactDOM so that ReactDOM can update the real DOM and insert this paragraph. ReactDOM would not render the entire DOM. It would not touch this existing h1 or div element. It would only insert the paragraph after the h1 element inside of the div. That's how React works behind the scenes in a nutshell.