React Just Changed Conditional Rendering! 🔥 Activity Explained | React 19.2

An built-in component named Activity has now arrived in React 19.2. What is the purpose of this activity, why should we use it, and where should we use it? So, I'm going to tell you about this in the video. Here you can see an example; on this occasion, I haven't used the activity-related embedded component, okay? So, Philal, the value of my counter right now is Fib, even if you go here too, if you also check inside the component We have a counter, and I have the counter's value as fib, okay, now this is fib Before you start typing, let me quickly show you the code so you can see where the filal was counting the value of the count and what its purpose is. The count value that I have is incrementing from one, here it was showing one, two, three, four to you Simple, this is your counter component, I'm calling it here, Ober here So here, I'm calling this, inside the app, our counter — you'll see it here, so here's our counter, there's a button, whenever anyone clicks on it, it's simple, the value of so, which is currently true, will be filled. It will hide, and I mean, it will become false, or true, or false, every time I click this button, and if this, which is my state variable, basically belongs to me, its value, if it is true, if it is true, If the value of my so is false, then this state here won't be visible to you. I hope you now understand the entire code here, okay? So now I'll look at Gohar here; my current state value is 5, I'm about to click on height now, and boom, we've made it height, okay? You hid it; he did what the moment its value became false, he did this to it Totally said that now we don't need this component, so it got unmounted, and so on This one got unmounted; basically, the component that had the counter got deleted. Basically, even its state was completely wiped out, meaning it was deleted. It's finished, and the moment I click this button again, so that this If I can render the one that's my component, then it comes back brand new. is calling the counter component, got it. So the problem here is that mine The state is not being preserved; it is being lost, so now I am here to show you Let me tell you that if we have the inbuilt component that has come in version 19.2, which is your activity, then if we If we used it, we wouldn't have to face this problem, right? So, what happens then? activity, and by the way, I'll show you one more awesome example, meaning it'll be fun. Because not just one, I'll also show you another example, okay, so here you can see, So basically, Activity is a built-in React component; first of all, this is an inbuilt React component. Like the component here, we also have a component—the counter component—this is also a component, but it is not built-in; I have created this one. Made of some components, but this particular component is an inbuilt one provided by React to you. is providing, then the activity which is basically your component, inside which you have two I can pass props, it accepts two props, you can see, one is your mode and the other one is the This has become one of your props, inside the button, this has become one of your props, HTML In the world, you used to call this attributes, okay, we have a mode and then we have a Children, now regarding this mode, it accepts only two values: either visible or hidden. Please take note. The mode is also a property, which has two values: filal, visible, and the other one It is hidden, okay. And if you don't explicitly set a mode's value as private, by default it's visible. Let's stop here. It's already clear, and don't worry, we'll take a complete look at life right now. Then check this out—this is how it sleeps, activity It's a component, right? Then inside it, if you write props mode equal to hidden, just check it out. What is written here is that React hides the children visually and preserves their state, so it can restore that state when the component becomes visible again. The biggest advantage for us here is that even if you hide it, you can still restore its state later. Hide it, but this activity component, what is it doing? It preserves their state, what is this? It preserves their state, so it can restore that state when the activity becomes visible. Whatever you pass through value and children, it goes inside it, so there's nothing to do; it just makes you engage in activity again. First, inside the activity, now you have this counter, component — you need to write it in this way, that's correct, so this will be false, it will hide, but hiding does not mean It will completely unmount or delete that counter, no. It will hide, and whatever state value it has, or whatever It will preserve it, okay, and you can also keep it here Remove this, then you can copy it and paste it again, so that You can display the values clearly here, for example, hide the counter, and you can proceed With something like a counter, okay, this is it, I haven't done anything, It was just one line; I integrated it into the activity, which is my built-in component. Now, if I just walk over here, I'll refresh it once, okay? If you look closely, we have this counter; right now, our state is zero. but let's say one, two, three, four, five, so now our current state value is what, it's five Right, but in case, I had to hide it again, I also had to hide it I hid it, I've hidden it, so you can see, even here you can't see it anymore. Your hide has already been taken from this place; now, if I click on so counter, Whatever your counter's bicycle was, the value of our state— even if I click on the counter, Again, you can see that value here, which is very useful. You understand, now I'm giving you another example. If true, then visible, meaning show this, your counter child component; if not, then hide. And by the way, even here, your CSS's display: none is being used, but along with that, there are also other things that React is adding inside it, which made this possible. Alright, guys, so you can see I've put another example here for you. Something that will make it even more fun for you—check out what it is: a homepage, we have a search page, Here, let's say you're searching for "react tutorial," okay, you've searched for "react tutorial." Alright, you thought, "Let's go," alright, you saw what you wanted to see, and then again, when you come back to the search page, oh my god, it's gone, the data's gone, just imagine that, just imagine it. Let's say we have a single application form that you were filling out, your name, your date of birth, your email, your qualification, your resume, You filled in a lot of data, and then on one page, you were asked for a certain ID number here, which you didn't have. So you switched tabs and went to another tab to check the ID number, basically downloading it. It will go bad, you understand, so this is exactly where your help is needed, right? That's what happened, something like that, he went there, came here, and that's the end. And look, every time, whatever I just mentioned, it's not necessarily required, but if you people, with that form, do something like this, then If the tab value is "Home," display the Home tab; if the tab value is "Search," display the Search tab. In this way, if you create any custom tab for pages, you will face this problem. Now, what is here ahead I didn't make any video, so why this, this is where it should begin, because It's also confusing for AG, and Yusful too, right? So let me tell you, now you can understand this How can I fix it? Nothing to do. Again, these two tabs, as I showed you with the activity, ternary operator: if it's true, this, else this, if it's true, this else this, and by It's inside the defaulted mode, your activity, your home component, this is your search tab component, done in this manner You must keep it, if you do this much, from now on I am one I'll refresh later, let's say I went here, react tutorial, I come home, I come back, and that's it, this is yours activity, new inbuilt component, which you will get in React version 19.2 It's coming, I hope guys you really like the video very much Gaa, and you can see, I don't know how many times I've gone over React It blew up, and I'd like to mention that I'm a full stack live online I've brought the classes, HTML is complete, CSS is halfway done, then JavaScript, then React will come, so guys if you're interested, you can contact me personally You can message me on WhatsApp, because the current price is even lower than that. You will receive this shortly, because the HTML is already complete. So if you want to learn live from me, obviously you like me Please WhatsApp me, or you can enroll, and I'll let you know the way. When I study through live classes, then a moment like this you can see here Yeah, you'll find out, okay? But yes, today in this video But that's not all, and I hope you find this new inbuilt component activity very interesting. I like this more, and I hope you understand it, I hope it makes sense to you If you liked the video, please like it, and share it with someone else. Also, if you have any doubts regarding this built-in component, let me know in the comment section, and also if you know of any one new concept in React that you'd like to see If I upload a video on it, please, whatever the new feature, component, or anything else is in React, please let me know. Please comment below to let me know what's new, so I can make a video about it. Should be made, okay, so please help me with this, or you'll handle it with your friends, and the channel so far Not subscribed yet, please do so, and the next target is 8 lakh subscribers. See you in the next video, till then, take care.