React Fragment Just Changed in React 19.3 🔥 | Fragment Refs Explained

Guys, I told you a week ago React version 19.3 is available It has been officially released. Among these, the two new features that you will see Here it is, the one we have just seen View transition is already covered by us. Your request has come. Tell me about the other features. Hala, you've recorded everything in just one video. I will definitely make it a priority, but I thought earlier, why not wrap this fragment The second one will be shown to you What does this mean, I'm also telling you today Tell me in the video. If you clicked on this As already mentioned by someone else If you want, if you prefer reading more Even after you obviously read this You'll understand, but I'll tell you What does "Iska fragment wraps" mean? We We will divide into 2 teams. It will be yours, guys, your fragment The second one will be your wrap. If you understand this, then for you it will be It will become easy, for example Like, just a simple one with me I have made a diagram for you all Here is your JSX code. You appeared to me in a certain way Here, right here How does it actually look in the code, tell me by speaking If I show it to you, it appears to you in that way. Whenever you write return After that, you create a React fragment. It is a shorthand property. Basically, it's code; you use it in the manner you're using it. What are the advantages of this? The advantage of this is that now you can You can group multiple elements Bina extra deep Add to dome Right, that's exactly what it means Just look carefully, I'll run this now Return, I'll run this myself It will appear clearly with focused attention. This is very useful. Refresh Maine If you look here This is my depth You will see here The main index.html is deep, isn't it? Inside him, these buttons are directly there We have added it. What's the benefit of your React fragment? If I had written "deep" here If it said deep here What does it mean to see? Just refresh it, that's all. Now, you're my actual deep one Index.html We wrote another deep one, just like this one. The Ki React fragment is an extra deep one. It does not create in the dome. But here, your creation has now been made. There was a difference in using the fragment. Before version 19.3 You've figured it out It's a fragment; nothing more than a fragment. Ab, what's this thing here again? Yeah, ab! Main Industrial Mainphone direct access if you need it So if you need him So, create this object for him. With the help of the user, he managed it. The JSX code you have is yours Whatever JSX there is in this, this is mine The button has it — you need to wrap the props "Jo" is the shorthand for property. So now this will happen with me This reference object, if I will say button wrap dot current Alright, so now this one It's holding. And I'll click it for you. So I said, brother, wherever it may be My reference object is that one. Focus on it this way So that was your wrap. So we've seen what a fragment is. We have seen what is the use of wrap hook Basically, this is your wrap right here So the fragment is also here The wrap is also here. So, what is this combination doing here? What need did we have here for this? I will now tell you I'm coming here. It's just a simple problem. What was React Fragment saying? He was lying on the ground, asleep. That is what you will see here. So, this is our group of similar elements. I had to group these together. So that I can be a parent at Agile What's deep about me Like First Child, my Lazy Child I'll add them as like events. I can do so much, can't I? And I want to do all of this with the help of ref So now this React fragment This fragment of mine Here we cannot use ref use There must have been some problem, guys That's exactly why React version 19.3 It is also written here. That's exactly what I meant by telling you the whole thing. Alright, what are its benefits now? I'll show you the entire code right away. Look, whatever you are We could not use ref in fragments You group similar elements Couldn't do it, okay This is something we could have done without fragment The problem was just that If you were to do something like that You have to go deep into it. You have a parent element So it has to be made, now just An extra deep to create a group It's starting to happen, isn't it? Now it will definitely happen. That you'll get an extra deep one here Which we do not need So, brother, I don't even need a deep one here. And let me also be part of the group And I am first, last, and everything else I can also add events, this functionality I just need, there, your fragment Reps come in handy, right? Then I'll take you along, by the way So this is React version 19.2 It won't work for you even in 19.2 It will seem to you React version 19.3 Because if I have your package.json Show you, so here we have this The one from 19.3, right? Here, your work will be done, look here What have we done, something like this? I mean, I have the total right here There are four buttons, right? And this is my fragment, look here I used fragment, by the way You will have to write this fragment. If you don't write fragments Yeah, I'll also smash this one. Look at this, yet it still won't work for you I mean, it's just the same as before, in shorthand form Not even then, not even now, you fragment It will have to be imported. from your React library, first of all The requirement is not the first one, nor the second one. requirement, first of all version 19.3 should be, then second You will need to import the fragment. from React, and just you Now write the fragment here What to write, just write a blank fragment Now you finally ref What is, bring it here You can do it, alright, and this one Advantage, I'm showing it now, look, I have There are a total of four buttons. Alright, from which This is the first one, I mean this is the starting The simple trick of the three. that I want to focus I'm focusing on the last method I want to run and then blur Alright, and the fourth one What will happen to him when you come back? Click here A button will be added once it's clicked. So kind of to do, like, okay We have here skills, so basically This is an array, obviously correct I mean, this is the array itself, inside the state We have set these three values. And what have we done? Whenever anyone clicks on Add Skill So it's simple that me Another element in this array Keep adding what there is. If you add anything here, for example Once, I told you this I'll show you by running it—how does this look? Okay? Look here, our add skill This is your added skill, inside it set skills for me, direct Whatever you write inside it You have the goods, that's your updated value. It will be called, this state variable skill. So dot dot dot Look at your spread operator, I mean Whatever my previous data is Stay here as it is You understand, this means this This will be Aisar. After that, we What are you doing, skills and Whatever the skill length may be, right now It's 3, so that 3 plus 1 will become 4, now it has become It will give you total, this will give 4 So you have this first 3 here Alright, then back next time Skill 5, then this is the code That's the trick, isn't it? Now here, Agar, look closely. So when we yank this fragment from Yust In this way, and I also wrapped it Pull it, and whatever there is My wrap is from the Bisli user app. This is the wrap object I got, yours What is it, I've told Siddha me to Pass it over to this fragment. I will, then it will happen now. if you press the first button What does it say when I click? This reference object of yours, then we have this .current focus, the beauty Now, what will it do? when you write focus, don't you? It starts doing this work from top to bottom. the one that came first, when focusing on it, He will focus on it, from within. Who is your first one? It's React, so first of all, focus will come in. Click the second button to go back, So again, skill reps, The reference object you have .current, then It will come right here, won't it? I'll show you right here, just once, Alright guys, so for you guys I've already added it. Alright, so that you all can see this, that writing it down What am I getting from the Akar Kar? Most important is, what is being offered at the mill? Alright, I'll go ahead and head over here. I'm refreshing, focus, Not the last one, this one, look at this, This is coming to you, What are you getting here? fragment instance, this is it, It is returning an object to you, This fragment instance, okay, now look, What is this, it's very important, once this You've got it, your entire game is over. Alright, so this is an object, Whenever you are in a fragment You're writing fragments, wraps, Above version 19.3, If you write wrap, you will get a fragment instance It matches whenever you have something like this You will do it, skills-wrap.current, What's the benefit of this now, this fragment instance, What's the benefit of this, look here, and its methods are the API, which is this, You can use it to control the elements. Inside it, this is it. Inside it, whatever is there now elements, with the help of this Fragment instance, you can control it. This power is giving you. fragment instance You is providing power, and by the way, I'll show you even that, like No, here, look at this, So when you write this, don't you? Press the single button for all, look, fragment, what is this giving you then? giving a fragment instance, the same fragment instance What are you providing now? This method focuses, focus last, blur, add event listeners, then this Everything, you who are The element that you are seeing here You can use this one as well, fragment instance I am giving you this power. Here, look at this, when you have something like this You write, React gives a fragment instance, Three important methods, Three what? Here I've given you so many Show me, right, this is what's coming up, look, This, as it is, is not a single If I appear before you, look at this, Regarding the elements, look here, you've noticed, If you look here right now, No one is giving you a dome node. That's exactly what makes it beautiful. that the fragment which you The power that was, one thing, it was obtained No deep creation is happening, extra, and then immediately wrap the element you could access the dome element, You can do that here. So, the mixture of both has now been delivered to you here. Alright, check this out, think of it like a controller for all elements inside the fragment All elements inside the fragment Now you can take control, with the help of this fragment Exactly this is it Your fragment meaning of wraps, that is was similar, now you have it I need to control it, okay, form a group so that you can be one, like Didn't we do event delegation? Gave a dip to the parent. I added an event on the parent. Then, it would become known who was clicking in the child. So much I did when I did it, Yeah, and by the way, this fragment instance here, take a look focus last, this is your fragment It's an instance, look, observer, event listener Yeah, look at all this, check it out here, Alright, guys, that's it, look at this, In the prototype, you need to add an event listener, blur, focus, focus last Look here, this is exactly what I've just shown you, all of this, I've shown it to you Here it is, so guys, this Hey, your fragment reps, and now Just relax, guys, that's all there is. What is, now by default you Here it is, when I told you So if you write focus, then from the top focus last on the bottom one on it If you want it blurred, I'll blur it. I already told you about adding skills. Normally, that's how it is, whatever it is Basic, guys, that was it Your fragment Guys, I hope you know now It must have gone, the power of the fragment, the power of the reps Together, now there is no one There is no tension; you just need to perform the reps. You can now use the fragment There's no need to create any extra depth. And seven seven, something extra for you The API is providing this, which is very immediate. easily, now you not only focus, like you You can add an event, scroll If you need to do something, you can trigger it. Although many It's a bit painful, but it's very effective. what React gives you now is an instance of a fragment What used to come first, when you Whatever your reference object dot When you write current, it would fully match the element. I'll show you that too. I'll also show you this right here. Yeah, by the way It's already here, check it out here This is what is currently showing, this is your current Look here, this is the complete element for you. It looks like this here; take a look But, that one, version 19.3 What is being offered to you? You, that current, that is not just an element It's coming, the complete fragment instance It's coming, so yeah, guys, this is it And the video that didn't clip, and Please like the video if you enjoyed it, and share it with your friends. Full of dust, and the channel has not yet Please subscribe, if you haven't already, I'll see you next time Next video, till then, guys, thank you so much Take care.