Тёмный

React Hooks: Advanced Hooks 

Harry Wolff
Подписаться 28 тыс.
Просмотров 87 тыс.
50% 1

React Hooks is an exciting new feature in the world of React.
Check out the blog post too!
hswolff.com/blog/react-hooks/
This tutorial shows you how to make an entire application using React Hooks. React Hooks provides a great developer experience and provides features that do a great job at reducing the friction towards creating state, updating state, and sharing state in an app.
If you're looking for an introduction on what Hooks are then check out my other video for a complete introduction: • React Hooks: A Complet...
Source code:
codesandbox.io/s/21vrnxyy3j
Follow me!
Twitter: / hswolff
Website: hswolff.com/

Наука

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

 

11 ноя 2018

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 237   
@workflowinmind
@workflowinmind 5 лет назад
By far the most comprehensive video on the subject !! Thanks a ton. Subscribed.
@pranav854
@pranav854 2 года назад
This is incredible! It's insane that your 20 minute quick tutorial explained context and reducer well than a 250$ react hooks workshop I recently attended.
@viraj_singh
@viraj_singh 4 года назад
I used react in a previous project. Currently I'm working on a project built with Angular. Looking how things have changed with hooks, Angular feels like an old grandma who tells you there's only one way to do it and that's her way.
@IconicProps
@IconicProps 2 года назад
I feel exactly opposite. React with the inability to really create a singleton for shared state, feels like spaghetti no matter how clean you write it. Don't get me wrong, you can make bad code in any framework, but react seems to force you early on to make the most spaghetti code possible until you gain a mastery of it.
@adriaanglibert3854
@adriaanglibert3854 5 лет назад
Great course! Explained very easily 👍
@akalrove4834
@akalrove4834 2 года назад
Your teaching style seems calming to me. I have watched a lot of React hooks video but this is the only one that clicked. You deserve a lot more subs and views.
@typescripttips6179
@typescripttips6179 5 лет назад
Thanks for the video, sir! Hopefully, this prevents some people from preemptively jumping to Redux :)
@rajandavis9294
@rajandavis9294 3 года назад
Thank you, got stuck on hooks and this is the perfect video covering the exact usecase I was looking for
@richie-bonilla
@richie-bonilla 5 лет назад
Thank you! This was a great way to walk through the various hooks and explain how they all fit together. My reptile enjoyed it as well.
@hswolff
@hswolff 5 лет назад
Hahah good :)
@Karlponken
@Karlponken 3 года назад
Thanks for this! It's nice seeing them all working together, makes it easier to understand!
@chethelesser
@chethelesser 5 лет назад
The best I've seen on Hooks, great job! Thank you
@hswolff
@hswolff 5 лет назад
Thank you! Glad it helped!
@mstalcup
@mstalcup 5 лет назад
I am very glad I found you. Subscribed.
@arpanbanerjee8584
@arpanbanerjee8584 4 года назад
You explain the concepts step by step, slowly building on the top of it when u explain some bigger concepts, that helps a lot. We get the idea , why are we using it! Thanks for the video!
@rluijk
@rluijk 5 лет назад
Well explained! Nice to see how composing with hooks makes it so easy to make it all look very clean
@hswolff
@hswolff 5 лет назад
Thank you! Glad it helped!
@victornweze7230
@victornweze7230 5 лет назад
The best video I've seen on react hooks. Big ups Harry
@hswolff
@hswolff 5 лет назад
Thank you sir!!
@Pareshbpatel
@Pareshbpatel 2 года назад
Fluently delivered demonstration of how to use the main React Hooks. Thanks, Harry
@gazzzou
@gazzzou 4 года назад
I am glad I found your channel. You are one of a kind that explain so clearly and deeply in a somewhat funny way. Well done. Keep going please. I already shared with other web fellows!
@hswolff
@hswolff 4 года назад
Yay! Thank you for spreading the word!
@eriboss11
@eriboss11 3 года назад
Where have you been , the last few months of my life... Love your videos.
@jessecrockett
@jessecrockett 5 лет назад
i've watched this video three or four times, it's really good. you're now one of only two youtube notify i've allowed :)
@hswolff
@hswolff 5 лет назад
Oh wow! Thank you! Let me know what else you're interested in learning about!
@wasuuu
@wasuuu 4 года назад
Holy smokes. First time I've seen your video and I'm delighted :D
@electroheadfx
@electroheadfx 3 года назад
Fast and efficient explanation for hooks in react ! great thanks a lot bro !
@fiilix99
@fiilix99 3 года назад
that is a very solid example of good information of react hooks. nice! thank you! subscribed.
@simonkalu
@simonkalu 4 года назад
A solid example of useReducer, useContext, and useEffect. Welldone, sir
@hswolff
@hswolff 4 года назад
Thank you!
@jpangelle
@jpangelle 5 лет назад
Great videos on Hooks man. They were really helpful. Thanks!
@hswolff
@hswolff 5 лет назад
Glad to hear!
@tak68tak
@tak68tak 4 года назад
This is the best tutorial video on Hooks on the planet!
@hswolff
@hswolff 4 года назад
Wow! Amazing! Thank you!
@gaboexodia
@gaboexodia 5 лет назад
The Hooks + Context are clear to me, thanks to you.
@hswolff
@hswolff 5 лет назад
Glad this helped explain it!
@PierreOupa
@PierreOupa 3 года назад
Excellent video Harry, thanks for sharing your knowledge with us!
@hswolff
@hswolff 3 года назад
Glad you enjoyed it
@sukiewang1040
@sukiewang1040 3 года назад
You are just amazing! Learnt so many awesome stuff about hooks from you! Just wanna say thank you!
@mediablitzeast
@mediablitzeast 4 года назад
Thanks for this. I coded along with this video. Learned a lot about hooks, especially the ones that I found to be confusing.
@hswolff
@hswolff 4 года назад
Excellent! So glad to hear!
@shawnlee5956
@shawnlee5956 4 года назад
clear + simple + direct. thanks~ for no advertisement video ^^
@mikkomiranda8526
@mikkomiranda8526 5 лет назад
I love this no more boilerplate from redux and very easy to use! Thank you for the awesome vid
@hswolff
@hswolff 5 лет назад
Wooo! Glad you enjoyed!
@djwave28
@djwave28 3 года назад
Just learning React/Redux this was a bit overwhelming, but a lot is recognized. Fun to see another approach on how to go about React. looks flexible, but that also makes it little harder to understand. I will be back to study this one some more ;-)
@JAdamMoore
@JAdamMoore 5 лет назад
"Needling the thread" was all I needed to hear to subscribe.
@theremotecoder
@theremotecoder 2 года назад
Great content! That answers way more questions than I had and came for :)
@dimor22
@dimor22 4 года назад
Thank you, it was very clear to the point video tutorial. Definitely learned something new
@hswolff
@hswolff 4 года назад
Wonderful! So glad to hear!
@Shavyg2
@Shavyg2 5 лет назад
i comment rarely, solid.
@hswolff
@hswolff 5 лет назад
Thank you! The comment is super appreciated!
@jamesstelvin
@jamesstelvin 4 года назад
Solid
@entertainment11378
@entertainment11378 3 года назад
Getting issue automatically call useEffect more than once
@Ihabkhattab
@Ihabkhattab 5 лет назад
Thanks Harry! this is really cool one 👏
@josephwong2832
@josephwong2832 3 года назад
nice walkthrough bro. I subbed to your channel!
@abhijiths148
@abhijiths148 3 года назад
Sooo Smooth in 20 mins... Nice Keep posting
@eminem2
@eminem2 5 лет назад
Many many thanks for your useful content!
@yoemasey
@yoemasey 5 лет назад
Love from India 🇮🇳. Thank you so much for your tutorial.
@hswolff
@hswolff 5 лет назад
Woo! Thanks for watching! Glad you liked!
@MrPlaiedes
@MrPlaiedes 5 лет назад
Nicely done sir!
@stonechueng1979
@stonechueng1979 3 года назад
thanks for your demo. very helpful
@AbhishekKumar-mq1tt
@AbhishekKumar-mq1tt 5 лет назад
Thank u for this awesome video
@RegisZaleman
@RegisZaleman 3 года назад
Nice and clear, you got my sub with this one :)
@ToniLiem
@ToniLiem 4 года назад
Great video dude... really help. Keep up all yr good work
@paramjeetdhiman1997
@paramjeetdhiman1997 2 года назад
Thank you sir, Well explained!
@TrilochanSatapathy
@TrilochanSatapathy 5 лет назад
Nice Explanation. Learned a lot from it.
@hswolff
@hswolff 5 лет назад
Awesome!
@kivylius
@kivylius 4 года назад
love it, great tutorial! i would like to see more examples of advanced hooks.
@hswolff
@hswolff 4 года назад
Glad you liked it!
@carlosricardoziegler2650
@carlosricardoziegler2650 3 года назад
Really Nice! Thank you man!
@julianjacobs8956
@julianjacobs8956 5 лет назад
fantastic video! great pace with good content. subscribed
@hswolff
@hswolff 5 лет назад
Hey, thanks! Welcome aboard!
@brothercaleb
@brothercaleb 3 года назад
Sumptuous architecture. Subbed
@richravestein9712
@richravestein9712 5 лет назад
I learned a lot! Thanks Harry!
@hswolff
@hswolff 5 лет назад
Yaaay!
@ashantharindu8915
@ashantharindu8915 3 года назад
Well explained. Thank you
@topogigio10
@topogigio10 4 года назад
Great video! Thanks from Argentina Pd: I love 12:47 moment
@josenunez5983
@josenunez5983 4 года назад
Thanks! I enjoyed and learned a lot
@justfly1984
@justfly1984 5 лет назад
Great video!
@aniketpaul5118
@aniketpaul5118 4 года назад
Great explanation. Keep up the good work. Subscribed.
@hswolff
@hswolff 4 года назад
Hey, thanks for the sub!
@SimPwear84
@SimPwear84 4 года назад
Outstanding Content, subbed!!
@MarkDyck
@MarkDyck 4 года назад
Thanks for the useRef example. That’s one that I never really ‘got’ before. :)
@hswolff
@hswolff 4 года назад
Yeah, useRef is tricky.
@user-tn2qd6sw1l
@user-tn2qd6sw1l 4 года назад
Very nice tutorial amigo. I'm hooked. Humor made me subscribe and I am glad I stumbled upon you :)
@hswolff
@hswolff 4 года назад
Thank you! I’m glad you stumbled here too! Get other people to stumble in! :)
@raghavjha8996
@raghavjha8996 4 года назад
Thanks for such a nice video lecture. Love from India!
@hswolff
@hswolff 4 года назад
You are welcome! Hello India!
@footstepparecords
@footstepparecords 4 года назад
This is so dope! Thanks.
@tolgask2812
@tolgask2812 2 года назад
This is an amazing video.
@DanelonNicolas
@DanelonNicolas 5 лет назад
we learn a lot! thanks!
@hswolff
@hswolff 5 лет назад
Woohoo! Glad to hear!
@barakatosalon
@barakatosalon 4 года назад
Great video, thanks !
@TelosMediaOrgOfficial
@TelosMediaOrgOfficial 5 лет назад
Very cool! Thanks!
@JohnCely
@JohnCely 3 года назад
Nice explanation!
@NotYourAverageCitizens
@NotYourAverageCitizens 4 года назад
great video! have a much better understanding of hooks after this
@hswolff
@hswolff 4 года назад
So glad!
@ugopalatucci
@ugopalatucci 5 лет назад
Great video. Thanks . I have learned a lot.
@hswolff
@hswolff 5 лет назад
Woo! So glad to hear! Thank you!
@rohan4035
@rohan4035 4 года назад
This is what I need!!!
@Alexandru-OM
@Alexandru-OM 3 года назад
Thanks, this is awesome
@cristiangutierrezdev
@cristiangutierrezdev 5 лет назад
My Crocodile says thanks for this video!!
@MistaT44
@MistaT44 4 года назад
Amazing video! thanks
@hswolff
@hswolff 4 года назад
You are welcome!
@alkismavridis1
@alkismavridis1 5 лет назад
React becomes better and better. Nice video! 👍
@hswolff
@hswolff 5 лет назад
Thank you!
@blackyurizan
@blackyurizan 4 года назад
this was awesome
@donmutua1739
@donmutua1739 5 лет назад
Thanks... Awesome content
@hswolff
@hswolff 5 лет назад
Thank you!
@juanignacio383
@juanignacio383 4 года назад
Very good!
@oksanaserhiivna2634
@oksanaserhiivna2634 4 года назад
Many thanks! :)
@eric7758
@eric7758 5 лет назад
Thanks so much
@aaronestes3282
@aaronestes3282 4 года назад
Nice!!! Thank you
@tylereikenberg9651
@tylereikenberg9651 4 года назад
Great video! Anything you would do differently with this now in 2020?
@JorgeLopez-yl3um
@JorgeLopez-yl3um 3 года назад
great vid
@Seb16291629
@Seb16291629 5 лет назад
Nice video! Shared already ;)
@mahendranath2504
@mahendranath2504 3 года назад
I like your thank you so much. a happy subscriber, amazing content .. can you do a series on react typescript
@gbrivate
@gbrivate 5 лет назад
I just refactored an entire app with hooks and Axios observables + Redux Observables also, I was willing to use useReducer instead of Redux, but u know, one thing at the time, as a big fan of RxJS - Observables, I could not get away with Redux Observables ( EPICS ) , anyway I'm very happy with the results of refactoring, now its 100% HOOks :)
@hswolff
@hswolff 5 лет назад
Heck yeah! So great to hear!
@StevenHoodlebrink
@StevenHoodlebrink 4 года назад
Thanks for the great content. Also, you type insanely fast and I thought I was a fast typer LOL!
@hswolff
@hswolff 4 года назад
Hahah, I should share that story about why I type fast. It's a funny one.
@StevenHoodlebrink
@StevenHoodlebrink 4 года назад
@@hswolff Yesss! Story time!
@kambaalayashwanth123
@kambaalayashwanth123 5 лет назад
Can you make same logic to work by making individual component files,
@BrandonHowardRay
@BrandonHowardRay 5 лет назад
Solid!
@hswolff
@hswolff 5 лет назад
Thank you!
@phqsphqs
@phqsphqs 3 года назад
Really nice video! The description of the todo doesn't actually get saved in the localstorage, right? It should be implemented in the onchange of the input, am I wrong?
@rickysmith1263
@rickysmith1263 5 лет назад
OMG React is so cool now 😍😍
@hswolff
@hswolff 5 лет назад
I think it is too!
@vaibhavm1986
@vaibhavm1986 5 лет назад
Hey Harry, recently started to follow ur vidoes, and like the way u explain concepts... Please make vidoes using typescript
@hswolff
@hswolff 5 лет назад
Thanks for the follow! TypeScript videos is definitely in the queue! Such an exciting topic!
@vaibhavm1986
@vaibhavm1986 5 лет назад
@@hswolff Yeah because in my opinion enterprise applications have lot of code and typescript is beneficial for large code base...after watching ur channel my expectations have increased I expect much more now from your future vidoes especially from real worl examples....keep it up creative work! 😊
@mr.somebody6368
@mr.somebody6368 4 года назад
Hi there, I was wondering what's the difference between just using an boolean instead of useRef then?
@asirishalika9660
@asirishalika9660 3 года назад
Nice Video
@axez2069
@axez2069 5 лет назад
great demo, would have been nice if the text would stick after reload.
@chethelesser
@chethelesser 5 лет назад
Add to reducer: case "change": return state.map(item => item.id === payload.id ? { ...item, text: payload.value } : item ); Add to input: onChange={({ target: { value } }) => dispatch({ type: "change", payload: { id, value } }) } Voila
@danielhughes3758
@danielhughes3758 4 года назад
Thank you so much! I also noticed that the text didn't stick around and your answer shows how I can send any value I want to a dispatch method and thereby change the state of the context from anywhere.
@nithincs
@nithincs 4 года назад
Cool video, thanks for that, one question about using hooks outside of the components, is that a correct way of doing, because I hear it cause unpredictable behaviour ? 18:00 ( useRef used in a independent function )
@tambolaking5383
@tambolaking5383 4 года назад
Beautiful. The last bit got way too confusing for me. Useref and custom hook with callback. Purpose of making useEffectsOnce?
@alexmalinin2387
@alexmalinin2387 5 лет назад
Hmm, does your useEffectOnce hook make sence, since we can pass an empty array to useEffect's dependencies (2nd argument)? Because your effect still runs on every render tho But interesting usage of ref, wondered to see what is stated in react docs for this usage case
@adamgrayson1918
@adamgrayson1918 5 лет назад
He did explain it was for educational purposes that he was doing that.
@redraushan
@redraushan 5 лет назад
Learned something.
@hswolff
@hswolff 5 лет назад
Wooohooo!
@cyberpsybin
@cyberpsybin 5 лет назад
Brilliant
@hswolff
@hswolff 5 лет назад
Thank you!
@diyorbeksadullaev
@diyorbeksadullaev 5 лет назад
Great!
@hswolff
@hswolff 5 лет назад
Thank you!
Далее
React Hooks: Custom Hooks
8:17
Просмотров 10 тыс.
Why I Love useReducer
22:40
Просмотров 91 тыс.
Secret Experiment Toothpaste Pt.4 😱 #shorts
00:35
ТРОЛЛИНГ СКАМЕРА СТАНДОФФ 2
00:59
Why Signals Are Better Than React Hooks
16:30
Просмотров 465 тыс.
Context API in react | get the concept
29:00
Просмотров 48 тыс.
Why React Hooks?
14:04
Просмотров 173 тыс.
React useRef() hook introduction 🗳️
11:18
Просмотров 14 тыс.
Async React Hooks
25:36
Просмотров 50 тыс.
How to useContext with useReducer
17:20
Просмотров 33 тыс.
Fun with React Hooks - Michael Jackson and Ryan Florence
1:02:51
6 State Mistakes Every Junior React Developer Makes
15:53
Use React.lazy and Suspense to Code-Split Your App
22:55
How to Soldering wire in Factory ?
0:10
Просмотров 5 млн