Original subtitles

For that in the components folder

I'll add a new sub folder.

I'll name it Demo.

And in there I'll add a new file.

And that's my DemoOutput.js file

where I import React from react.

And then here I have the DemoOutput where I get props

and I export this as a default, of course.

So that's a standard component.

At least it is as soon as we return js

and now I'll take my paragraph here.

This is new.

Remove this line here from the app component

and add it instead here as the return value.

To be precise, I'll do something slightly different now,

I will not conditionally render my own component or not

because it should be obvious that this will behave

like rendering the built-in paragraph component or not.

Instead, inside of DemoOutput

I'll change the HTML structure a tiny bit.

It'll not just be this paragraph like this.

Instead, I will render this text

in the paragraph conditionally

and I will render it conditionally

based on some data I get through props

so that I can check if props show for example.

So if the show prop is truthy

let's say we expect a Boolean here.

So if it is true, and if that is the case

then I want to render "This is new!"

otherwise I will render an empty string.

So the paragraph element is always rendered

just the text changes now

based on the show prop.

So now back in app component 'Hi there!'

for one to include my DemoOutput here.

So make sure you import DemoOutput of course,

and there, I want to set the show prop

because we use that show prop in DemoOutput.

And the value we pass here

should of course be ShowParagraph

because that is a Boolean.

It is false initially,

and it's changed to true if we click the button

and then back to false ends on.

So now it is component here is always rendered

and in the component, the paragraph is always rendered

but the text that's shown

that will change based on the show prop.

So now if I saved that,

let's go back.

First of all, if it clicked this you see

we got basically the same behavior

as before there is no great difference.

Now, if we expand our Dom here a little bit

we see of course that the paragraph is always there

but again, if it clicked a button,

we see that the paragraph flashes when I click it

and it flashes again if I click it again,

the reason for the paragraph flashing

is that we now only work with that element

and we add or remove the text.

And this is treated as a change for entire element

which is why the paragraph flashes and not just the text

because the text is basically like a prop to the paragraph.

You could say it's it's content,

but again it's just a paragraph.

It's not the h1 or the button element.

So the fact that we're using a custom element,

a custom component does not change this.

And of course it shouldn't

the updating mechanism should always work

by comparing differences.

It is of course, interesting to see

that we are changing state in the app component.

And yet only the paragraph

which is part of another component flashes.

So this of course, proofs that the react updating

and diffing mechanism works and finds out changes correctly.

Now, another thing is also interesting though,

if we go to the Console

and a reload here, you see app running

and you see that,

of course runs whenever I click this button.

Now keep in mind the actual change happens in DemoOutput

but of course the app component runs again as well

because that's where we managed the state.

And I mentioned the component where you manage state

or where you have props or context

and that state props or context changes

that component will be re-evaluated and re-executed.

And we are managing the state in app.

So just because the change

visually only affects this paragraph in another component

does not mean that the app component is not re-evaluated.

Of course it is because there we manage our state

and that's, by the way

also what I meant earlier with props and context

in the end always coming down to state changes.

The props we got in DemoOutput

are of course responsible for why DemoOutput is re-rendered.

But ultimately of course, the value we get here

on the show prop

is the value we manage in the ShowParagraph state,

ultimately it all comes down to state

and state changes in react.

Now it, of course should be obvious

that if I now add a console log here in DemoOutput

that we'll see this being printed

for every button click as well.

We see it initially

because that component is rendered initially.

And then if I click Toggle Paragraph,

well, we again see DemoOutput running for every click.

And again, that makes a lot of sense

because the props changed with every click.

So thus far, this hopefully all is pretty clear

and pretty straightforward.

Now I'll show you something that might be confusing.

Keep in mind the DemoOput running is printed

for every click.

And again, that makes sense because we do change the state

and therefore the props here with every click.

But now let me tweak this in App.js

I will now hide the code to value I pass to show

and it will set this to false.

This means that we'll never show the output

because it's now detached from the ShowParagraph state.

Indeed, I'm not using the ShowParagraph state at the moment.

I'm still changing it, but I'm not using the state value.

Now, what would you expect as a result?

Let's see if the app reload

we see app running and DemoOutput running makes sense.

The app just loaded, both was rendered,

but something interesting happens

when I click Toggle Paragraph.

If I do that, you see app running,

okay, we changed the state there

but you also see DemoOutput running.

And that's interesting.

The props didn't change, right?

We have to show prop

and the value I pass in there is still false.

It never changes, it's always false.

So why was DemoOutput re-executed?

Well, let's take it step by step.

The app function is re-executed because state changed here.

Now, what is part of that app function?

Of course, this return statement

and there we return some js code.

Now, all those js elements here

in the end are like function calls

to the respect of component functions.

So we call the function for the DemoOutput component.

We call the function for the button component.

That's why those child components are also re-executed

and re-evaluated just because the parent component changed

because they are part

of the parent components, function body.

And if the parent component function runs again

of course the child component functions also run again.

So in the end, the prop value doesn't even matter here

for this component to be executed again,

it's just a fact that the parent changed.

Changes in props

might lead to actual changes on the real Dom

but for the function to be re-evaluated

it's enough that the parent component was re-evaluated.

Of course, the fact that DemoOutput runs again

does not mean that the real Dom is touched.

We can verify this with elements

there you'll see that nothing flashes.

I can hammer that button and nothing changes there

because react just re-evaluates the components.

And as you learned, re-evaluating a component

and re-running its component function

is not the same as re-rendering the real Dom

or manipulating the real Dom.

But it is really important to understand

that if a component is re-executed

all its child components

will also be re-executed and re-evaluated.

So therefore of course not just a DemoOutput component

is re-evaluated, the button is as well.

If I console log button running here

you will see that if I go to Console and reload

we see all three outputs initially.

And if I click this Toggle Paragraph button

we also see all three.

So the button component is also re-evaluated as well.

This of course brings up one question though,

here we have a very simple app

just one route component with two child components

which then each don't have any more child components

if they would have child components though

those child components would also be re-evaluated

of course and I can show this to you.

If I add a, MyParagraph.js file here

where I essentially copied DemoOutput,

but I then simplify this

and here I have MyParagraph also as a component name.

And then in there, I just output a paragraph tag

with props children in between.

I can use MyParagraph instead of the built in paragraph.

And I'm really just doing this for demo purposes here

to show you how react updating works.

Not because this would be such a useful component, it isn't.

But now with that, if I add MyParagraph

which replaces to build-in paragraph, just to then reuse it

if I add this you'll of course will see

in the console that MyParagraph running also is re-executed

for every button click.

So this continuous down the component tree

and this poses or this brings up one important question,

isn't this bad?

Because if all those component functions are re-executed

that's a lot of ongoing function executions

and virtual comparisons

that certainly costs some performance, right?

So isn't this bad if there actually is no reason for that

because we know for example,

that we never need to re-evaluate DemoOutput

because it can't change.

The only prop, which it has is hard coded.

If it had no props at all

we also would know the output in there will never change

because of the state that's managed in app component.

So re-executing DemoOutput

and all its children is a total waste.