Stop Writing React Code Like This

Key Takeaways

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