All language subtitles for 009 A Closer Look At State & Components_en

Obviously,

state is a crucial concept in React.

Ultimately, everything comes down to state

when it comes to re-rendering components

and changing what's on the screen.

So therefore components and their interaction with state,

that is really a core aspect of React.

And it is worth noting

that both, of course, is managed by React.

This component's concept comes from the React library,

and React also takes care of your state

that is attached to components.

It takes care, for example, by using the useState Hook,

and that's how this interaction

between components and state is handled.

Speaking of that,

one of the most common forms of managing state

is to use the useState Hook.

With that, you create a new piece of state, you could say,

and you automatically attach it to a component.

The component in which you call useState.

This attachment, kind of,

is done behind the scenes by React.

Because when you call useState,

React behind the scenes creates a new state variable,

you could say, which React manages for you,

and which React also for you ties to this component.

Now, I mentioned at the end of last lecture,

that it's strange that even though we call useState

every time the app function runs again,

we don't seem to lose or reinitialize

our state all the time.

The reason for that is simple.

UseState is coming from React,

and I just said that React is managing the state

and the connection to the component for you.

And as part of that management process,

React makes sure that useState

and the value you pass as a default value to useState

essentially is only considered once.

The first time ever a component is rendered,

so the very first time the app component runs,

useState, when executed, creates a new state variable

which is handed off to React

and which is managed by React.

React then basically memorizes

to which component that belongs.

The app component, in our case.

And it uses the default value

to initialize the state with that value.

For subsequent app function calls,

so for reevaluations of the app component,

when useState is being called,

no new state is being created.

Instead, React recognizes

that it already has a state for this component,

and it instead simply updates that state as needed

because the app function reran

because some state changed most likely,

and therefore React will only do

that state management and updating.

It will never reinitialize the state

unless the component was totally removed

from the DOM in the meantime.

Which in case of the app component, will never happen

since it's our root component.

For child components,

if it's rendered conditionally, for example,

a component might be removed,

and in that case, if it's then later reattached,

a new state would be initialized.

But as long as a component stays attached to the DOM,

state is only updated after that first initialization.

That's one important note to take.

And of course the same is true for useReducer, for example.

Now that's not all you need to know about state, though.