React Hooks useRef Tutorial

[@jrs_devs]

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.

[@aashayamballi]

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

[@madebylewis]

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

[@hemantjain761]

Can you share some examples?

[@xerxius5446]

@@hemantjain761Go to React Docs's FAQs page, this hook's code is there

[@dawid_dahl]

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

[@joshpeterson1004]

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

[@tslqs]

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

[@AbhishekSharma-mm6ld]

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 :)

[@yuushamenma2130]

On line 12 of your useFetch hook: Why do we use a callback of setState(state => ({...})) instead of just doing setState({data: state.data, loading: true}) ?

[@lilibayo]

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!

[@JagaSantagostino]

for isMounted using state with force an additional rerender due to the state changing, updating ref.current will not trigger a rerender. Internally useref uses usestate, this is why you pass the entire ref to the component so that react can change it for you This is very informative: www.reddit.com/r/reactjs/comments/aufijk/useref_is_basically_usestatecurrent_initialvalue_0/ More info: reactjs.org/docs/hooks-reference.html#useref

[@lilibayo]

@@JagaSantagostino ah, makes sense. Thanks for the explanation

[@pratikkamath8423]

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

[@kirankandula2779]

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

[@Seb16291629]

Clear and concise ! Time for some refactoring !

[@hashcode_01]

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.

[@herrklaus]

Thank you, Ben.

[@ZhDinerstein]

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.

[@bawad]

Sure

[@GlenBondMogane]

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

[@ateebahmed2237]

Mast video banai h, maza agya !

[@Ko0lHaNDLuKex]

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!

[@bawad]

If you put that variable inside the function it will reset every render, useRef lets you persist the value between renders

[@petersantoso2605]

@@bawad A question: wouldn't it the same, even the var isMounted reset to true it will set to false in cleanup function? so the setState wont be called.

[@bawad]

Yeah, but if a variable should be scoped with the component then it's better not to make it global

[@petersantoso2605]

@@bawad got it, thank you for your reply!

[@shankar99977]

​​@@bawad Quick question: Insteading taking useref value as a boolean, taking it as a null initially and passing a setTimeout reference to it and clearTimeout in useeffect return for that ref would also do the same thing, isn't?

[@javierzapien314]

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

[@chrisarcher9907]

any thoughts on how to provide focus on mapped inputs?

[@何家華-l1b]

awsome,useful,perfect,Thank you!

[@the_derpler]

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

[@vaasudhand3200]

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?

[@hashcode_01]

it will be redefined in each re-render

[@rohandevaki4349]

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

[@oorangecchicken]

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?

[@bawad]

the value of useRef only resets when the component is unmounted

[@AnilPai]

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.

[@mayankketkar3450]

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

[@bawad]

props propagate, imperative does not

[@DiogoLessa]

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!

[@bawad]

here are the extensions I use: benawad.com/plugins The speed comes from using vim though benawad.com/vim

[@tannerbyers6729]

Awesome tutorial! Really helped! Subscribed :)

[@kishorrathva4097]

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?

[@arjunprakash2815]

May be try after removing of strict mode in Index .js file. Note: In dev mode you can comment or remove strict mode but make sure for prod you can use strict mode. Hence it render only once in prod rather than dev. Eg: import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( // , // , document.getElementById('root') );

[@dericbytes]

Really well done. Thanks

[@pjately078]

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

[@bawad]

Not specifically

[@vasupatel6932]

Short and Sweet

[@zhanghedev]

I am the first one to support you.

[@tomermatmon]

Great! Thank you!

[@kareemsakr41]

Great work. keep it up.

[@manthenagowtham9437]

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.

[@phantazzor]

nice , you going really fast but nice video

[@julianb.8749]

deep!

[@adrisongomez8454]

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

[@aqua123670]

thank you

[@zlackbiro]

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

[@raptus9115]

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.

[@CaioUechi]

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