React Hooks useRef Tutorial

Подписаться 497 тыс.

Просмотров 97 тыс.

50% 1

Learn how to use the useRef hook in React.
Code: github.com/benawad/react-hook...
Playlist: • React Hooks Tutorial
----
If you like cooking, checkout my side project: www.mysaffronapp.com/
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitch: / benawad
GitHub: github.com/benawad
LinkedIn: / benawad
Instagram: / benawad97
Twitter: / benawad
#benawad
TikTok: / benawad

----
Follow me online: voidpet.com/benawad
#benawad

Наука

Опубликовано:

23 июн 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 61

@jrs_devs 3 года назад

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 5 лет назад

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

@AnilPai 4 года назад

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.

@dawid_dahl 3 года назад

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

@pratikkamath8423 3 года назад

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

@GlenBondMogane 4 года назад

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

@ZhDinerstein 4 года назад

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 4 года назад

Sure

@the_derpler 4 года назад

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

@Seb16291629 5 лет назад

Clear and concise ! Time for some refactoring !

@kirankandula2779 4 года назад

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

@user-ym2lb2vl2n 5 лет назад

awsome,useful,perfect,Thank you!

@madebylewis 5 лет назад

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

@hemantjain761 4 года назад

Can you share some examples?

@xerxius5446 3 года назад

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

@tannerbyers6729 4 года назад

Awesome tutorial! Really helped! Subscribed :)

@Alexandru-OM 4 года назад

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

@AbhishekSharma-mm6ld 3 года назад

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

@dericbytes 4 года назад

Really well done. Thanks

@tomermatmon 5 лет назад

Great! Thank you!

@kareemsakr41 4 года назад

Great work. keep it up.

@ateebahmed2237 3 года назад

Mast video banai h, maza agya !

@herrklaus 3 года назад

Thank you, Ben.

@vasupatel6932 4 года назад

Short and Sweet

@hash2020 Год назад

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.

@zhanghedev 5 лет назад

I am the first one to support you.

@chrisarcher9907 3 года назад

any thoughts on how to provide focus on mapped inputs?

@aqua123670 5 лет назад

thank you

@joshpeterson1004 3 года назад

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

@lilibayo 5 лет назад

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 5 лет назад

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 5 лет назад

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

@javierzapien314 3 года назад

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

@yuushamenma2130 2 года назад

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}) ?

@DiogoLessa 4 года назад

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 4 года назад

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

@mayankketkar3450 4 года назад

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

@bawad 4 года назад

props propagate, imperative does not

@Ko0lHaNDLuKex 5 лет назад

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 5 лет назад

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

@petersantoso2605 4 года назад

@@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 4 года назад

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

@petersantoso2605 4 года назад

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

@shankar99977 11 месяцев назад

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

@pjately078 4 года назад

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

@bawad 4 года назад

Not specifically

@vaasudhand3200 3 года назад

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?

@hash2020 Год назад

it will be redefined in each re-render

@oorangecchicken 4 года назад

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 4 года назад

the value of useRef only resets when the component is unmounted

@julianb.8749 3 года назад

deep!

@kishorrathva4097 3 года назад

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 3 года назад

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') );

@rohandevaki4349 3 года назад

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

@adrisongomez8454 3 года назад

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

@phantazzor 3 года назад

nice , you going really fast but nice video

@manthenagowtham9437 4 года назад

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.

@zlackbiro 4 года назад

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

@CaioUechi Год назад

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

@raptus9115 3 года назад

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.