Original subtitles

Attached you find this very simple application,

which in the end currently,

just has this app component with a div and the h1 tag.

So essentially what you just saw on the slide here

and now let's replicate that behavior,

I showed you on the slide.

Let's say for some reason

eventually a paragraph should be added here.

Now, how can we eventually add this

and not add it right from the start?

Well, with a state change, for example

we could have some state which changes such state.

Initially, no paragraph is rendered.

But then at some point

because a button was clicked or a timer expired

or anything else happened,

the paragraph is displayed.

Now I will work with a button here

and therefore first of all,

I will import useState of course

because we need some state.

Because as I mentioned,

React will only rerun this function

and re-evaluate what's on the screen

if state, props or context changes.

Now, since this is our root component

props and context is a bit harder.

And in the end, it's all the worth noting that,

of course it all comes down to state changes, ultimately.

Even context internally will use some state,

that might change the value

which is then distributed through context.

And if we think about props,

being passed from a parent to a child

how could the value passed through props change?

Well, ultimately only, if state in a parent changed

it all comes down to state changes in the end,

if you think about it.

So therefore here,

we're going to work with some state

and I'll name my state here, showParagraph

and setShowParagraph.

And initially that is false.

My initial state here is false.

And then here we use showParagraph,

as you learned it in the conditional module.

In the conditionals module,

this is how we can show an element conditionally.

Now, if I saved this,

of course we will not see the paragraph

because our state is false.

And currently we have no way of changing that state.

Now in the starting project,

you find a button component,

just so that we have a nicely styled button.

So we'll add this button component here, import button

from ./components/UI/Button/Button,

showParagraph is the label we could have on it.

And then here we can add the onClick prop

on the button,

and add a function here,

toggleParagraphHandler, for example

and this function should trigger when the button is clicked

and it should actually toggle the paragraph.

Let's say, so, rename my caption here to Toggle Paragraph.

And in there I will then set showParagraph

and I will set the state,

to what showParagraph currently is not,

so that we basically inverse it.

The short form would be this syntax,

where we set the value for showParagraph,

to the opposite of the old value.

But since we depend on the previous state snapshot

I mentioned that we want to use the function

forward state update here.

I will come back to why we do that,

later in this module again by the way.

And therefore let's use the function

for prevShowParagraph,

and we'd return the opposite of prevShowParagraph therefore.

And this is the cleaner way of changing our state.

And now we bind the toggle paragraph handler to the button.

So with that,

we have the logic to conditionally show a paragraph.

Now to center this, I'll quickly go into my styles here

and add text align center here in the app selector.

Side note, I'm not using CSS modules here.

I'm just using regular CSS imports.

Okay. With that let's click toggle paragraph

and you see the paragraph is here

and it's gone and it's here and so on.

Now, that's interesting to know.

But let's now analyze what's happening.

First of all, I always mentioned that state changes,

prop changes and context changes,

would result in this component function,

being executed again.

If that's the case,

we should be able to add a console log here

and say app running

and see this whenever we clicked a button and yet.

Well, let's see whether that's the case.

I'll save that.

Here's my console.

And you see initially, app running.

That is because the page reloaded

and that brought this app component to the screen,

for the first time.

So of course this was executed by React.

And for that first renders cycle,

React then found out that it wants a div,

a H1 element and a button.

No paragraph, because initially that's not shown.

And it checks that to the last output it's saved.

And since this rendered the component for the first time

there essentially is no previous output.

There is no previous snapshot.

And therefore, this difference comparison,

in the end resulted in a div, a h1 tag

and a button to be rendered.

And that information was handed off,

to the React DOM package,

which therefore rendered that to the screen.

Now, if I click toggle paragraph, we see app running again.

So that proves my point that for every stage change

the entire component in which the stage changed,

is re-executed, is re-evaluated.

Now, how is the real DOM affected though?

For that, let's go to the elements tab,

in the dev tools.

And let's expand our div here.

The app div.

Now, if I reload, we see we just have the h1

and the button element here initially.

And now,

the good thing about this elements tab is

that things that are changed in the DOM,

will be flashed.

They will be highlighted.

So did we can see where the real DOM was rerendered

or updated.

Now therefore, watch this part on the right here.

As I click a toggle paragraph button.

You see.

The only thing that flashed, was this paragraph.

The h1 buttoned element did not flash,

neither did anything else.

It was just a paragraph.

And if I remove it, it's just a div

because from there the paragraph was removed.

But the h1 of the button elements,

were not flashed because they were not re rendered.

And that's what I meant.

Only the difference between those virtual snapshots,

was considered for the updates made through the real DOM.

And that is really, really crucial to understand.

Now, let's see how that might change,

if we work with more components.