The brand new React activity component

is a super simple component that can

drastically increase the performance and

reliability of your code. Let's take a

quick look at this example right here. I

just have a button that toggles this

counter section down below. I can

increase or decrease the counter, add

something inside this text box. And when

I remove this and read it, you can see

all of my state is reset. The reason for

this is because this counter component

is being completely removed every time

that I toggle this button. And in this

counter component, the default state is

zero. And this input has no default

value. So it just defaults to an empty

string. This is the problem with adding

and removing components is they always

reset to the default. But sometimes you

don't want that behavior. This is where

the idea of the activity component comes

in. This component works pretty much the

same as you would if you wanted to wrap

something in a conditional render.

Instead of using that conditional

render, you just wrap it inside of an

activity component and set this mode. If

the mode is equal to visible, then this

content is showing up. And if it's set

to hidden, then the content is removed

from the page just like conditional

rendering. The big difference though is

that it'll properly work with keeping

your state in sync. So, for example, if

I come in here and I change my state and

this state here and I remove this, it's

removed from the page, but when I read

it, it keeps that previous state that I

had. This isn't the only use for the

activity component, though. I'm going to

swap out this component with a brand new

one. And this component is slightly

different. You can see we're wrapping it

inside of a suspense as well. My

activity is exactly the same. And the

thing inside this component is this

async data component. The really

important thing you need to know about

this component is it just has a 2-

second timeout before it returns data.

So if we refresh our page and we open

this up, you can see it says loading for

2 seconds before my data shows up. The

key though with this activity component

is it's actually smart enough to preload

all this data. So if I refresh my page

and I wait two full seconds and I click

toggle, you can see my data has already

been loaded in the background for me. So

I don't get this loading state. This is

something you were unable to do before

this activity component. So it not only

helps you with maintaining state but

also can increase the performance by

preloading different parts of your

application. Now this is just scratching

the surface on what this component can

do because there's some really deep dive

stuff related to performance that this

component can handle that you couldn't

do before at all inside of React. And if

you want to learn more about that, I'm

going to link a full video at the bottom

of your