A Trick Every React Developer Should Know: Ref Forwarding

Рет қаралды 18,910

Күн бұрын

Ref forwarding comes in super useful when building reusable components in your React app. By forwarding a ref, we get access to a DOM node in the child component the right way - because in React, you can't pass a ref as props.
0:00 Why bother learning?
0:23 The theory
4:20 The solution
⭐ My GitHub: github.com/joschan21
⭐ Our startup: wordful.ai

Пікірлер: 36

@dennisadamczyk5067 Жыл бұрын

Actually, using useEffect with a ref in the dependency array does not work as expected because refs are not part of reacts component dependency system. A component does not rerender when you change the current value of a ref, so the useEffect will also not run in this case.

@meaningmean Жыл бұрын

Thanks for the comment. Ive learned from you. import { useRef, useEffect } from 'react'; function MyComponent() { const myRef = useRef(null); useEffect(() => { console.log('useEffect ran'); console.log(myRef.current); }, [myRef]); const handleClick = () => { myRef.current = 'new value'; }; return ( Change ref value ); } In the example above, we have a useEffect hook with a dependency array that includes myRef. When the component mounts, the useEffect callback runs and logs 'useEffect ran' and the current value of myRef to the console. However, when we click the button to change the current value of myRef, the useEffect does not run again. This is because refs are not part of the React component dependency system, so changing the value of a ref does not trigger a re-render or cause the useEffect hook to run again.

@martapfahl940 11 ай бұрын

I had cases where this was exactly the behaviour I needed :P

@dennisadamczyk5067 11 ай бұрын

@@martapfahl940 In this case you could also leave the dependency array empty. There is no point in adding the ref as dependency for the useEffect then.

@martapfahl940 11 ай бұрын

@@dennisadamczyk5067 You're actually right I mixed up 2 different topics...

@welserrano Жыл бұрын

Exactly what I needed. Thanks and keep doing great content like this!

@Diego_Cabrera Жыл бұрын

Bro you saved me. I literally was mindblowed I dont know how I never came across this while learning react

@joshtriedcoding Жыл бұрын

Cheers man!

@kinzeyrahardja2600 Жыл бұрын

Does putting [ref] as the dependency array for useEffect work? I thought useRef doesn't create any component re-renders like useState. Or perhaps is it that whenever the "ref.current" changes, no re-render is done, but changing the value of "ref" causes a re-render

@anmoljhamb9024 11 ай бұрын

Thank you for the tutorial man! I was looking for this exact thing!

@joshtriedcoding 11 ай бұрын

verrry nice cheers

@kc-bytes743 Жыл бұрын

new thing to learn , You genius you make difficult concept easy

@ayushjain7023 Жыл бұрын

Nice video, Could also have added the usage of useImperativeHandle hook, this would have given the viewers more insight to use the forwarded refs

@taiwodamilola8636 Жыл бұрын

Properly explained 👍🏼, thanks man do a full react typescript.tutorial..

@merotuts9819 Жыл бұрын

Could you make a video on passing refs between child & parent components along with *useImperativeHandle* hook ?

@ivangemota1527 Жыл бұрын

what name of extension did you use for typescript snippets?

@prasathj7436 10 ай бұрын

Excellent, thanks a lot !!!

@timekouka Жыл бұрын

great one brother!

@iwantfrens5804 Жыл бұрын

Hey Josh. Why do you use Firefox?

@shawn-skull 10 ай бұрын

Why didn't you just rename the *ref* so it be treated as a prop instead of an attribute. It works for me

@ksas323 6 ай бұрын

Thank you

@filipesommer8253 Жыл бұрын

What is the extension to see the gzip size on imports?

@illmatic08 Жыл бұрын

import cost

@milon27 11 ай бұрын

🎉 how to accept generic with forward ref(). i am using forward ref with react hook form, so i need to pass the control and need to make the types generic so that based on the control i get name="" auto suggestions

@adamrodriguez7598 Жыл бұрын

if you start typing log instead of console.log then it will auto complete @7:25

@AngelEduardoLopezZambrano Жыл бұрын

You could have named the ref prop something other that ref. It would have worked as well.

@idobleicher Жыл бұрын

nice video.

@joshtriedcoding Жыл бұрын

thanks man!

@martinezomg Жыл бұрын

Inspired on shadcn.

@joshtriedcoding Жыл бұрын

His work is great

@amotekundev 7 ай бұрын

@@joshtriedcoding The way you aknowledge others is really commendable

@0xPanda1 Жыл бұрын

🥰

@wakinki 4 ай бұрын

Why stop using typescript in the middle of the video ?

@boris--- Жыл бұрын

Back to flipping burgers... I have no idea what just happened in this video.. I watching this my 3th time.. and still don't understand even where you possibly want use ref...

@amotekundev 7 ай бұрын

🤣