React Hooks useRef Tutorial

damn, you are too fast. I guess Im too dumb for this hook atm lol

Disliked 👎

Hey Ben, well done, good use cases, just to let everybody knows, the unmount warning use case is resolved in React 18 , no use case anymore so.

Thanks for highlighting all those things with useRef most of the time I only use it for dom reference only.

But Even though as per the last part I would have still gone for clearTimout during the memory clean up :)

Thank you, Ben.

nice , you going really fast but nice video

Great video Ben! Pretty concise and well-explained :)

That moment when you realize that you are not the only one that feel loose trying copy and paste using VIM in a Mac.

For the second useCase, can't we just use a "let variable" to maintain some data across re-renders. Obviously that variable will not be used anywhere, where it can cause a re-render?

The final part of the video was gold for me, I’m working with some component transition animations and I have that error. Thanks!

your code on github seems like it is the finished code, but not initial code. please provide the initial code

any thoughts on how to provide focus on mapped inputs?

I don’t see how the hello component is re-rendering as you type??

If you pass [] into useEffect and then set isCurrent.current to false inside, why isn't it set to false on first render?

Mast video banai h, maza agya !

I was not understanding most part of your videos as I was watching them being a total beginner to React, but I've come here after a month and they are very clarifying. Thank you for taking your time on doing this.

deep!

Sorry, but ref's is the worst idea the React team has come up with, so what if I need to detect the widths and heights of 20 elements? I have to add refs for 20 elements? Insanity. I love React but anything relating to DoM manipulation quickly becomes a clusterfuck of ref's and is tragically unmaintainable.

A better solution needs to be on the table.

in my case 'Hello render ' console twice every time i type like if i type 'a' it console 'Hello render 1' and Hello render 2' , can any one help?

Thanks for the video. The usecases considered here are very helpful.

I have a code which is multiple popover in material ui in react class components. I need that code to be in react hooks. Can you help me? If so please reply me I'll send the code link.

Thanks. This is a good video. It helped me clear up some misconceptions I had about refs.

I've learnt alot to this Playlist... Very well explained and great examples for all use cases

Really well done. Thanks

Awesome tutorial! Really helped! Subscribed :)

What does imperative calling imply? I get the definition however i am trying to distinguish that from using props to propagate changes

Thank you so much for your react hooks tutorial videos. I stumbled upon your video when I was searching for useRef usage, looks like you have the best explanation of all. Including all the different use cases. I would suggest you to update the React docs with your examples.

Love these videos! Precise and very easy to follow.

If possible, please increase the zoom on your IDE in the future. Can be difficult to read sometimes while viewing on a phone.

Hi, Ben! Could you share with us some extensions you use in vscode to speed up your coding? I can see you have some cool stuff around... We'd appreciate!

Waw I did not know useRef is this good, thanks!

Interesting... but how does useRef(0) not reset back to “0” every time the component re-renders? Shouldn’t it always render “1” even with the unary (++) operator?

Short and Sweet

Great work. keep it up.

Yes, React users forgets JavaScript very quick... 🙂

Do you have any tutorials on creating custom hooks like the useFetch hook in this video?

awsome,useful,perfect,Thank you!

Clear and concise ! Time for some refactoring !

Thank you so much, it was so clear and concise. Thank you again :)

You can also utilise a hook with useRef to return a previous value (e.g. prevProps, prevState), pretty neat!

Hi Ben, thanks again for an informative video!

A question: what's stopping me using a plain JS variable to ensure the state isn't being updated after unmounting? Like, just saying `let isMounted = true` when the effect is called, checking isMounted before setting any state, and then setting isMounted to false in the cleanup function?

Why do we have to use a ref here?

Thanks!

thank you

For the isCurrent example to ensure we dont call setState on an unmounted component, I have seen some examples that utilizes useState with a variable isMounted. Everything is pretty much the same as the example you provided. Curious as to the difference in using state vs ref to keep track of the isMounted/isCurrent state/var. Is one better or is it just a personal pref?


Thanks!

Great! Thank you!

I am the first one to support you.