React 19 Changed Refs Forever 😳 | No More forwardRef?

Guys, listen carefully In React, if we need to focus the input field from parent component to child component then we use forward wrap before React 18 but in React 19 Forward wrap is not available. There it is said. that now finally You can use wrap as a prop. so the biggest question is in React 19 Now the forward wrap is removed. will all our old Codes break because now forward wrap is not needed This is said in React 19 but before that How many projects must have been made? Will their codes break? So this is the biggest question. And we will see this question in practice. And I'm going to clear up this doubt. I will solve this problem. through React 18 and 19 then your doubt will be clarified What is forward wrap? and now forward wrap is not needed So how can we use wrap as a prop? now in React 19 Everything will be clear. so before starting the video if you are interested React 19 does not exist yet. As of now, the latest stable version of React is React 18. There have been no official announcements or releases regarding React 19. Any information about React 19 would be speculative or based on unconfirmed rumors. For the most accurate and up-to-date information, refer to the official React website or the React GitHub repository. or what things are old So I've already made a video about this. and I have also updated the playlist So please check It will be fun. and one more update from this 20th I'm going to go live react online classes every night from 9:00 to 10:30 p.m. Already on the website What content are we going to learn? What are we going to cover? What will be the project? and daily live classes means daily doubt session We will do interview preparation. quiz test certificate and most importantly You can talk to me every day. You can ask your doubt. because I teach you live So, guys, if you're interested I have submitted the form as described. and comment section You can fill in your details Then I will share the price. Details on WhatsApp and one more awesome news When I will announce it Then the price will be higher. if you enroll now then the奔赴 price I will share it with you at 30% discount price Alright, now let's begin. without any delay Alright, guys We are on our VS Code editor Here I have provided some definitions. that a ref in React is a way to directly access a DOM element when we need to control it now with the help of ref you can access the DOM element Yes, guys if you want to access the DOM element then you will use ref otherwise you are using the state and all those things Ref is like a remote control. basically a remote control for a DOM element because finally you are getting the power to access the DOM element through ref Alright where it is useful basically to trigger imperative work Imperative means giving an order. like I need to focus on an input field You are ordering. You want to select a text You want to scroll into an element. or do you want to play or pause the video Then your reference is useful. I hope you know What is ref? We will see it with a simple example. where we have a parent component You can see We have a child component. I will create a child component. in which we have input fields Alright our parent component has a button When I click on this button my child component has an input field I need to focus on it Why is it important? because the parent-child component can be accessed only if you use ref Let's say you have 5 input fields. the input field you want to access It gives you access to it Alright This is my parent. and this is my custom element which has no label and placeholder before React version 19 Alright const equal to function and same you will receive This is the way return Let's go with your label. and input You can make it a self-closing tag. Alright The JSX expression must be valid. Here we will use fragment so this is the way I hope you understood. if we click on this button This input should be focused. Now how to do it We need a reference. because parent cannot be accessed directly I mean the parent cannot be accessed So we need a reference. We have a use ref hook and we need to import it from React library I am nullifying initial data I am clearing the initial data and its reference I am passing a variable like input ref I hope you understood. so initially my input ref has null value as soon as we render this page Obviously, this part will run. Now what will I do my input ref as a prop I will pass my child component You can see I have passed my input. Now in my child component I have passed a reference. I mean There is a way to connect. now as soon as I passed reference to my child component These three are props. I have to get it. Now what will I do I will take two props label and placeholder I will keep the label here because it is a text and my placeholder will come here like this What is happening here? Let me refresh. handle focus This is our function We haven't created it yet. So I will Create it normally. and leave it Alright You can see Our data is here I can see, enter your name because we wrote it here now If I click on it Nothing will happen. But I need to focus. now button is with parent and our text is with child component parent cannot access directly So ref is useful I told you I have already passed ref Alright I have ref Now if I click the button my input ref current current element if it is present focus method which I want to call simple I am refreshing it Still nothing because input reference current input ref dot current Where is it? It is null. Now what do we have to do? I have passed the reference. I didn't get it. so how can I get so guys before version 18 You can see Alright I put it in parentheses and here you have to write forward One second forward reference Did you see? Basically, I put all the functions in it like this now forward ref here forward ref from React I have to get like this I have to get now This is my prop. which I deconstructed but here I have to write a reference like this You can see I wrote the reference like this now in my input field my ref I'll pass it like this You can see if you want to pass a reference from parent to child component Forward ref will help us like this By the way, we can't use ref directly. like props We have to use forward ref. forward ref to child component Simple, right? Save Controller refresh Alright I think label I have to put it inside. basically label and input are the same I click And that's it. Finally you are getting input placeholder like this basically input ref dot current we are targeting current ref reference we are targeting this input element This is its power. Copy it Pass it. There is no reference. refresh See I have two input fields but you can see Focus on this not on this This is the benefit of using the ref hook and finally I will tell you how ref works target is this See carefully This was the first method. Now React version 19 See carefully React version 19 The main problem is I was not able to use ref as props so React version 19 is over now we can do remove forward ref and parentheses now remove this and paste inside everything will be as it is refresh See carefully 3, 2, 1 See This video is so long. to show you You don't need forward ref in version 19 directly You can use ref as a prop normally you can write otherwise before version 18 We cannot use ref as a prop. that's why we need forward ref now We don't need forward ref. because our old code will break Nothing like that This is also version 19 My project is running. Where is it? package.json Which version am I using? Version 19 so In version 19, forward references will also work. It is not deprecated and you have time to migrate So the first question Forward ref is not over and second Will our code break? It is working. but my suggestion when you have such an easy way to use ref as a prop This is so simple In fact, you don't need this. because it is a normal function you can use fat arrow fat arrow function now if I refresh It is working. It's so easy. So yeah, guys That's it for today's video I hope you like the video and we have compared the old and the new so now Your doubt will be cleared. One more time I will recommend to treat ref as a prop Then your work will be easy. and there is no tension So guys, one more time Listen carefully Ref is a way to maintain a reference. of any DOM element by which we can directly access and control that element It's like ref is a remote control. I hope, guys with this definition Your doubt will be cleared. How was the video? Let me know in the comment section Like the video if you want to learn live online interactive classes I have submitted the form as described. and comment section I will contact you on WhatsApp Until then, guys Thank you so much. Take care.