# The NEW React Activity Component Is a Game Changer for Performance

## Метаданные

- **Канал:** Web Dev Simplified
- **YouTube:** https://www.youtube.com/watch?v=Ae6gQXacjaA

## Содержание

### [0:00](https://www.youtube.com/watch?v=Ae6gQXacjaA) Segment 1 (00:00 - 02:00)

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. 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

---
*Источник: https://ekstraktznaniy.ru/video/20686*