All language subtitles for 002 How React Really Works_en

So how does React work?

Lets not forget that React is a JavaScript library

for building user interfaces.

That's what I taught you at the very beginning

of this course and of course it hasn't changed.

We also learned and we saw,

that 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

whether 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 manages 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,

off to the interface it's working with,

for example, it hands it off to ReactDOM

because ReactDOM is then responsible

for working with the real DOM, which is part of the browser.

And therefore ReactDOM is responsible

for bringing something onto the screen,

which the user is then able to see.

React only cares about components.

It cares about props, which is basically data you pass

to components to make components configurable

and to enable parent-child component communication.

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.

And whenever props, state or context changes,

components that use these concepts are updated

by React and React checks whether this component

now wants to draw something new onto the screen.

And if that should be the case,

React will let ReactDOM know about that

so that ReactDOM is able to bring that new screen,

that new component, that new output to the screen.

So therefore, if we have a close look at that components

real DOM communication here,

the question of course is, how exactly does this work?

As I mentioned, React is concerned about components

and what React in the end does is,

it uses a concept called the virtual DOM.

It determines how the component tree,

which your app is building in the end,

and every component itself, of course, has a sub tree,

that JSX code returned by that component.

It determines how that component tree currently looks like

and what it should look like,

for example, after a state update.

And that information is then handed off to ReactDOM

which now knows about the differences

and which then knows how it should manipulate the real DOM

to match that virtual DOM,

that virtual snapshot React derived

for your component trees.

And related to that, there's one important thing to note.

Throughout this course I often said

that React would rerun a component function,

that it would reevaluate a component.

And indeed, as I mentioned before,

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 re rendering 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.

Instead we have to differentiate between our component part,

our React part and the real DOM.

Our components, as I just said,

are re-evaluated whenever 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

based on that difference React derived

between the previous state of a component and its tree

and the current state after the state prop

or context change.

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.

That happens only in memory.

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.

And that's my React has this structure

of doing virtual comparisons with that virtual DOM

and then only passing the changes between your last snapshot

and the current snapshot to the real DOM.

That's how React works here.

It does this virtual DOM diffing,

finding out the difference between two snapshots.

And to see a real example,

it could look like this.

Let's say all the given component

our previous evaluation result.

So when the component function ran the last time is this.

And now some state changes

and all of a sudden we wanna show a new paragraph.

So that's our current evaluation result.

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

Now let's see this in action with some real code

and let's play around with that a bit

so that we get a feeling for this

and so that we can all find out how this all behaves

and possibly changes for props and state changes

for context, and for other components being involved

because it is really crucial that you understand this.