The new activity component in React is a

must know if you do any conditional

rendering at all. And in this video, I'm

going to teach you every single thing

you need to know about this component.

But I'm not just going to stop at the

basics. We're actually going to be

diving into this super new analytics

performance tools built into React to

talk about different performance gains

that I haven't seen anyone else talk

about when it comes to the new activity

component.

Welcome back to WebDev Simplified. My

name is Kyle and before we start diving

into the complicated minutia of how

activity works, we first need to

understand the basic use case for it. In

our very simple application, I have a

button that allows me to toggle a

variable between true and false. And

then I'm using that true false variable

which is called is visible to toggle the

visibility of this counter. So when I

click this toggle button, you can see

all this code down here just adds or

removes itself from the page. Super

straightforward. This is how you do

conditional rendering in React forever.

Essentially, inside of our counter

component, it's a little bit more

complicated. We have state for a count.

And you can see down here, I have

buttons for both decrementing as well as

incrementing that count. So, when I

click minus, you can see the count goes

down. When I click plus, you can see the

count goes up. And then I have a basic

input with no React state or anything

hooked up to it. I can just type in this

as a normal DOM input. So, you can see I

have my count set to three, some random

text in my input, and if I toggle this

and then read it, you can see that all

of my state has reset to default. My

input is blank, my number is back to

zero. And that's because whenever you

use this style of conditional rendering,

React essentially removes this component

completely. And then when you read the

component by making it visible, it is

added to the page. And when a

component's added to the page, it uses

all the default state and resets

everything back to normal because

essentially it was removed. So it

doesn't exist in the DOM. And when it's

readded, all that stuff gets set back to

the default state. Also, you'll notice

we have a use effect inside here. This

use effect just console logs out click

every single time that I click on my

page. So you can see if I inspect my

page and I go over to the console, every

single time that I click, you can see

this counter right here is being

incremented. And if I toggle this so

it's no longer on the page and I click,

you can see nothing happens. Nothing

gets logged because this use effect is

no longer on the page since my element

is completely hidden. Now in certain

scenarios, you may want the state of

your thing to persist. So when I

increment my state and I remove it, I

want this to stay set to four. This is

where the activity component comes in.

In the most basic use case, instead of

using this is visible variable to hide

and show our counter, instead we can use

the activity component. And the activity

component has a mode either hidden or

visible. So what we can do is we can say

if it should be visible, then we want

the mode here to be visible.

Otherwise, we want the mode to be

hidden. And essentially now this is

going to allow me to toggle between

those two different states. Let me make

sure I close off my activity component

down here as well. and we'll just put

our counter directly inside of there.

And now essentially we're doing the

exact same thing. You can see when I

toggle this to hide and show, it still

works just like it did before. The big

difference though is that it doesn't

actually remove this element from the

page. It keeps all of that state inside

of it. So if I change my counter or I

change my input element and I hide it

and I show it, you can see all that

state is still there. The really nice

thing though is certain things like use

effects which no longer should work are

properly removed. So, if I go and I

inspect my page and I go over to the

console, you can see while it's open, it

logs out clicked. And if I were to

toggle this to close it and I click, you

can see it no longer logs those clicks

off to the console. So, it's smart

enough to know if use effect should be

running or not. So, it removes those for

you, but it keeps around all the other

things such as the state inside of my

element. So, that when I toggle it back,

you can see all that state is still

there. Now, this is pretty much where

all tutorials stop when it comes to

talking about this activity component

because this is the basic use case for

it. But there's actually a lot more you

can do with it. And I want to talk about

how you can use this to preload pages to

make them load much faster. Instead of

this counter component, I'm going to use

this component called async data. This

async data is using suspense behind the

scenes. So you can see here we have this

use suspense query which is from react

query that allows me to query data and

while it's loading it's going to throw

up a suspense boundary for me. So what I

can do is in my code instead of this

counter I can have my async data right

here. And I just need to make sure that

I wrap this in a suspense with some type

of loading state. So we can come in here

with our suspense and we'll give it a

fallback here which is just going to be

a p tag with a class name of data just

so we have all the same styles on this

as we did for everything else. And

inside of that I'll just put the text

loading

and then we'll close off that P tag.

There we go. So now if we just give this

a quick save we can see exactly how this

works. And of course I want to make sure

I only show this if it is visible. So we

can say is visible. Then we're going to

show the data directly inside of it.

There we go. So now what I can do is I

can just refresh my page. You'll notice

nothing is showing up. And when I click

toggle, you can see I get the loading

text. And then 2 seconds later, since

it's how long my promise takes to

resolve, you can see it gives me the

text hello. If you look inside of here,

it's just essentially a fake promise

that takes 2 seconds and returns the

text hello. So essentially, when I first

get to my page and I toggle and show

this, I get the loading state and then

my content shows up. And you can see

it's permanently loaded there, which is

exactly what I want. The problem though

is let's say I refresh my page and I'm

on this page for 5 6 7 8 9 10 seconds

and I click toggle. it still has to wait

2 seconds to load my data. It'd be

really nice if while I was on this page

doing other things, it loaded that data

behind the scenes for me. This is

something you can do with activity. So

instead of hiding this with is visible,

I'm just going to use that exact same

activity component to do the hiding for

me. I'll come in here. I'll set the mode

just like I did in the other one. So I

can say if it is visible, then the mode

is visible. Otherwise, it's going to be

set to hidden. We'll put all of our

content inside of here. So we render out

that async data. And now by doing this,

we get the benefit of that loading

happening instantaneously. So when I

refresh my page and I wait a few

seconds, we're just going to make sure

it has enough time to load. And I click

toggle, you can see that data is

automatically loaded. And that's because

what essentially happens behind the

scenes is React sees these different

activity components and it renders

everything else on your page first. So

it renders all of this content,

everything after it. And then it says,

"Okay, I'm done rendering everything.

I'm not doing anything else. I'm going

to go to all these different activities.

I'm going to pre-render all the data for

them behind the scenes." So it goes into

here. It runs my promise, pre-rennders

all that data for me. And as soon as I

make it visible, that data is already

there for me. Now, obviously, if I

refresh my page and I open this up

before it finishes loading, I still have

to wait for it to finish loading, but

it's going to start loading essentially

immediately when I render my page

instead of waiting for me to show this

for the very first time. This is a huge

performance gain, especially if there's

something on your page that you know is

going to get loaded eventually, but it's

waiting for the user to show the actual

data. This is a great thing just to

preload behind the scenes using these

different activity components with

suspense enabled data. Now, the final

example I want to talk about is really

where it kind of breaks through and

shows you the power of the performance

gains that you can get from this. And we

need to use some type of server enabled

component. So, I just have a basic

Nex.js application. This is just the

boilerplate Nex.js code you get. All I

did was take all this content inside

this div and move it out into its own

secondary information component just so

it's easier for us to visualize what's

happening inside of our page. So, now

what I'm going to do is I'm going to go

over to that next.js application.

Doesn't matter what the code on this

page is. We're going to dive into the

performance tools for this. So, we're

going to inspect here. We're going to go

over to performance. And you need to

make sure that you are on the latest

version of React for you to be able to

see these performance tools. I have it

zoomed in as much as I can, which

unfortunately is still kind of hard to

see, but what we can do is we can click

this little refresh button right here.

That's going to refresh our page and run

all these different performance tools

behind the scenes. And importantly, the

thing that we care about, if we scroll

down a little ways, as you can see here,

we have theuler. These are all the

different things happening inside of our

application. So, you can see we have

some hydration happening here, which is

kind of the thing that's really

important. You render your component on

the server, it gets passed on to the

client and then it needs to be hydrated

to essentially rerender to make sure

everything's hooked up properly for like

event listeners and so on. And if we

actually scroll down inside of our code

all the way to the very bottom of our

application, you'll see that it's

rendering out all of our stuff. We have

our homepage right here. We have that

secondary information component and then

all the children for that secondary

information. So you can see here it's

rendering the homepage and then the

secondary information. Now in our

particular case, this secondary

information is not very important. The

really important stuff is this homepage.

Everything inside secondary information

is not important. But the problem is is

you can see that I have to wait for this

secondary information to finish

rendering before anything else on my

page can happen. It's essentially

blocking the rest of my page from

finishing because of the secondary

information. You can imagine that

instead of this being something that's

just some boilerplate divs, it's some

really complicated code that's

timeconuming and slow on your

application. So instead, what we can do

is we can actually wrap this in an

activity. By wrapping this in an

activity and don't even care about what

the mode is. It's always going to be

visible. the default is visible. So we

just wrap it in an activity with a

default visible mode. What we're

essentially telling React is, hey, this

content right here is separate from the

rest of our page. We can render all of

the rest of our page and hydrate it

first. And once that's done, then we go

back and we hydrate everything inside it

here. So this allows you to take slower,

less important things and hydrate them

at a lower priority. That way the

important stuff can hydrate first. This

is kind of how that suspense related

stuff we talked about is working as

well. it breaks this into its own

delayed render where it happens later.

We're essentially doing the exact same

thing here. This information hydrates

after everything else on the page. We

can see this very easily by just going

back into that performance graph. You

notice how these are all combined

together here. If we click that refresh

button and we restart this render and we

take a look at what it returns now, you

actually see there's a slight

difference. If we scroll down into this

component section at the very bottom,

you'll notice here the homepage is here,

but there's nothing else. There's no

secondary component or anything. what's

happening if we scroll all the way back

up to the timing section. So we can see

here we have this first hydration and

then a little bit later we have

essentially a idle stage where another

hydration is happening and you can see

that is where our secondary information

is going. So essentially what this is

doing is it's taking all of our

important stuff rendering that out and

hydrating it first. Once that's done and

there's time where nothing else is

happening then it can go through and do

this secondary information or lower

priority information next. This is great

again like I said for breaking apart

your application where you have a large

chunk of really complicated code but

maybe it's less important. For example,

if you had a blog post, the blog post

itself is the most important. Everything

related to comments is less important.

So you can wrap the comments in an

activity and make sure that it doesn't

block the rest of your blog from being

interactive and used. The comments will

load later as a secondary resource. And

if you're interested in diving further

into how this different profiling tool

works, as well as all the new stuff in

React 19 with the compiler and so on, I

highly recommend checking out my React

simplified course. It'll be linked down

in the description for you. This covers

every single thing you need to know

about React and I just updated it to

React 19 and it also includes a Nex.js

simplified course which is updated to

the latest Nex.js 16. So if you want to

learn either React or NexJS, I highly

recommend checking out both of these

courses. They're going to be linked down

in the description below. With that

said, thank you very much for watching

and have a good