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.
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 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.
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
🎉 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
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...
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.
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.
I had cases where this was exactly the behaviour I needed :P
@@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.
@@dennisadamczyk5067 You're actually right I mixed up 2 different topics...
Bro you saved me. I literally was mindblowed I dont know how I never came across this while learning react
Cheers man!
Exactly what I needed. Thanks and keep doing great content like this!
new thing to learn , You genius you make difficult concept easy
Thank you for the tutorial man! I was looking for this exact thing!
verrry nice cheers
Nice video, Could also have added the usage of useImperativeHandle hook, this would have given the viewers more insight to use the forwarded refs
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
Properly explained 👍🏼, thanks man do a full react typescript.tutorial..
Could you make a video on passing refs between child & parent components along with *useImperativeHandle* hook ?
Why didn't you just rename the *ref* so it be treated as a prop instead of an attribute. It works for me
if you start typing log instead of console.log then it will auto complete @7:25
Excellent, thanks a lot !!!
great one brother!
what name of extension did you use for typescript snippets?
Hey Josh. Why do you use Firefox?
What is the extension to see the gzip size on imports?
import cost
Thank you
🎉 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
You could have named the ref prop something other that ref. It would have worked as well.
nice video.
thanks man!
Inspired on shadcn.
His work is great
@@joshtriedcoding The way you aknowledge others is really commendable
Why stop using typescript in the middle of the video ?
🥰
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...
🤣