A Trick Every React Developer Should Know: Ref Forwarding

[@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]

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

[@dennisadamczyk5067]

@@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]

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

[@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!

[@welserrano]

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

[@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

[@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

[@merotuts9819]

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

[@kc-bytes743]

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

[@taiwodamilola8636]

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

[@anmoljhamb9024]

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

[@joshtriedcoding]

verrry nice cheers

[@shawn-skull]

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

[@AngelEduardoLopezZambrano]

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

[@ivangemota1527]

what name of extension did you use for typescript snippets?

[@adamrodriguez7598]

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

[@prasathj7436]

Excellent, thanks a lot !!!

[@timekouka]

great one brother!

[@iwantfrens5804]

Hey Josh. Why do you use Firefox?

[@ksas323]

Thank you

[@filipesommer8253]

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

[@illmatic08]

import cost

[@milon27]

🎉 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

[@wakinki]

Why stop using typescript in the middle of the video ?

[@idobleicher]

nice video.

[@joshtriedcoding]

thanks man!

[@soymartiinez]

Inspired on shadcn.

[@joshtriedcoding]

His work is great

[@amotekundev]

@@joshtriedcoding The way you aknowledge others is really commendable

[@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]

🤣

[@0xPanda1]

🥰