A Trick Every React Developer Should Know: Ref Forwarding

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

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

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

[@ivangemota1527]

what name of extension did you use for typescript snippets?

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

[@kc-bytes743]

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

[@anmoljhamb9024]

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

[@joshtriedcoding]

verrry nice cheers

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

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

[@prasathj7436]

Excellent, thanks a lot !!!

[@iwantfrens5804]

Hey Josh. Why do you use Firefox?

[@ksas323]

Thank you

[@timekouka]

great one brother!

[@filipesommer8253]

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

[@illmatic08]

import cost

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

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

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

[@soymartiinez]

Inspired on shadcn.

[@joshtriedcoding]

His work is great

[@amotekundev]

@@joshtriedcoding The way you aknowledge others is really commendable

[@0xPanda1]

🥰

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

🤣

[@wakinki]

Why stop using typescript in the middle of the video ?