Learn useReducer In 20 Minutes

Рет қаралды 489,598

Күн бұрын

🚨 IMPORTANT:
Full React Course: courses.webdevsimplified.com/...
In this video I cover everything you need to know about the useReducer hook. I go over all the main use cases for useReducer as well as many common mistakes that developers make. This is part of a series of React videos where I cover all the important hooks in React.
📚 Materials/References:
useReducer Blog Article: blog.webdevsimplified.com/202...
React Hooks Playlist: • React Hooks
🧠 Concepts Covered:
- How to use hooks in React
- How to manage complex state in React function components
- How to use the useReducer hook
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#ReactJs #WDS #useReducer

Пікірлер: 616

@thesuperiorman8342 3 жыл бұрын

The second example was a lot to take in but I think once I understand the design pattern, the whole concept becomes clear. Thank you for the great explanation

@rickeyupadhyay6898 Жыл бұрын

You made it very easy kyle Thank you so much here is my learning from the above explanation:- 1.) UseReducer hook gives us an array of [state,dispatch] same as useState hook and use Reducer itself takes an reducer function , inital state. 2.) Whenver we runs an dispatch function the reducer function get's triggered and with the help of reducer function we can update new state. 3.) Reducer function takes 2 arguments which is the current state and action and the parameter action is used to write the logic based on the dispatch action type. 4.) Dispatch function takes an object (action) which contains two things action_type the action which we want to perform and also it takes payload which contains all the variables which we want to pass to over reducer function. Once Again thank you so much Kyle for the great explanation.

@dl88889 3 жыл бұрын

This is easily still the best introduction to useReducer. Clear, concise. Way better than some of the paid classes I attended.

@nickmee8731 4 жыл бұрын

Man you're like 23y/o and knows more than a Senior developer 💯

@negatif9163 3 жыл бұрын

is he Junior developer? 🤔

@RickyGarcia_Learning 3 жыл бұрын

Senior developers know more about engineering in general. System Design, Data Structures, OOP, communication are all skills that senior devs will need to know. I know I'm going to catch so much hate for this.

@Justin-ei1qf 3 жыл бұрын

@@RickyGarcia_Learning that is 100% correct, primarily system design and TONS of social skills that young people lack. Being a senior isnt only being able to program on your own, its being able to lead a team of devs, something young devs without much work experience will just lack. simplifies is really knowledgeable in the tech aspect tho for sure!

@KevinBeal 3 жыл бұрын

@@RickyGarcia_Learning Rawr! I hate you! Just kidding.

@SupunPraneeth 3 жыл бұрын

well, this is not senior level, this is React basics. don't get me wrong, I really like his videos, but you can't tell he knows more than a Senior developer just by looking at this video.

@mohammedalmukhtar8949 4 жыл бұрын

Kyle - Thanks for these great videos. I actually ran into issue the other day at work and went back to one of your videos and articles I'm subscribed to and it helped me in getting that bug fixed. Keep up the good work, man!

@lodoss118 3 жыл бұрын

amazing content, really impressed with your communication skills and how you break down things into understandable chunks

@PenguinjitsuX 2 жыл бұрын

This video is amazing. It's the best tutorial on useReducer I've seen! I love how easy it is to follow because you started with a really easy example by replacing useState with useReducer and then moved on to a more complex one with the todo app.

@darinadimitrova7432 Жыл бұрын

This tutorial is one of the most useful coding tutorials I've seen so far. Really happy with the way it's all being explained :)

@cryptonite6000 2 жыл бұрын

Its actually insane how good you can explain what you are doing. Thank you so much :)

@devc.krishna8573 3 жыл бұрын

Its the best react hooks series on the entire internet

@DuyTran-ss4lu 3 жыл бұрын

Super concise and informative. This is truly "simplified". Thanks a lot!

@ridl27 4 жыл бұрын

Kyle, we really need a repo with all of these hooks examples to use them as reminder :) Thank you for great tutorials!

@temzeks 3 жыл бұрын

we can make one

@iJuce 2 жыл бұрын

@@temzeks ok go make one ! :D

@zetaalpha3319 2 жыл бұрын

pls check Full React Course in description

@ridl27 2 жыл бұрын

@@zetaalpha3319 bruh.

@dubskiski4964 2 жыл бұрын

Your tutorials are so clean and informative, thank you for all the work you do!

@kisnasur2145 3 ай бұрын

It helped me a lot to understand the Redux concept. well done.!

@VinnieBrazelton13 3 жыл бұрын

After binging 3 of these in a row I'm pretty sure I'll be buying your course. You are a great teacher, awesome job!

@alexzhang2099 Жыл бұрын

thanks! your ability to explain complex concepts and implement them effortlessly for us while walking through your thought process is insane. thank you for making these resources free

@leanprogrammer 3 жыл бұрын

This is basically redux, great stuff

@Bellathor 2 жыл бұрын

Just wanna say - I've watched a few of your videos, and they've all been very useful, well explained and presented in a digestible manner.

@praveenkg725 10 ай бұрын

Clear, easy to understand and direct. Just what I needed! Thanks man!

@daveliew 3 жыл бұрын

Thank you so much Kyle, you’ve made me fall in love with React! I love the power of this hook!

@HarveyXE 3 жыл бұрын

Thank you so much for making this demo. I went through the steps carefully and have a better grasp on the concept. This was a good demo.

@devilstrela 4 жыл бұрын

You talk straight to the point, no bs around and great explanation :) love this channel

@elie_hokayem 4 жыл бұрын

Thank you for putting everything together in such a short example, good work as always Kyle.

@mohammedmogary7134 2 жыл бұрын

Kyle, thank you for these excellent videos. They are simple and quick. They are really helping. Again thank you for your great work. Love your videos

@hoangcuongtran4606 2 жыл бұрын

Actually those who familiar with redux would find this more easier! Thank you for your lesson sir !

@rBroneak 2 жыл бұрын

Well done sir! I've a few of your react vids to help understand and use react in a more powerful and organized way. Very generous of you and very appreciated!

@njayman 4 жыл бұрын

Best react hooks tutorial

@edoardocasella8169 3 жыл бұрын

I agree

@tejasmandre666 4 жыл бұрын

AND JUST LIKE THAT I learnt how to use useReducer. Short and informative video. Thanks man !

@simdanofficial 4 жыл бұрын

This is one of my favorite channels, thanks for everything

@joelwalkley3902 3 жыл бұрын

Super helpful, reading the docs wasn't clicking for me. Thanks for taking the time to offer this!!

@pqrsandeshbackup 11 ай бұрын

Thank you for this. Your videos on hooks are the best videos I could find on KZfaq.

@shurui91 3 жыл бұрын

"The idea behind useReducer is it gives you a more concrete way to handle complex state so it gives you to set actions that you can perform on your state and it's going to convert your current state to a new version of the state based the action you send it."

@CastleShield Жыл бұрын

It's so much easier if you know "why". Most documentations and tutorials often focus on "how" and that's annoying.

@Frodonar Жыл бұрын

@@CastleShield Facts

@easterling9489 Жыл бұрын

Can't thank you enough! This complicated theme is so much easy now after your explanation!

@jimhawkins2483 8 ай бұрын

best video about reducer i've seen so far, many thx wds

@MarshallBanananana Жыл бұрын

Best explanation out of four, I watched so far.

@SaurabhNative 3 жыл бұрын

Great tutorial. Thanks for making such awesome content. This was simplest and easiest possible example on useReducer I could find.

@jadalhamwi1543 3 жыл бұрын

that's probably the best explanation of react's useReducer Hook!! thank you very much for the simplification

@alyssadeng6462 2 жыл бұрын

Thank you so much for these examples. I was confused by the React docs because I wasn't sure what types state and todo were supposed to be and am not familiar enough with typescript to understand the source code. Definitely learned within 20 minutes!

@AmodeusR 2 жыл бұрын

Really a great class! I learned how to use it in the first 5 minutes following along :P Everything got much more clearer to me, thanks!

@satya-lifevlogs 3 жыл бұрын

You are like a saviour for React mankind. Loved your work, man!

@setoseng Жыл бұрын

Great explanation. I really appreciate how you break it down even further with the examples. Helps explain the Hook better than the React Docs.

@yyxx9309 Жыл бұрын

Man! This helped me understood useReact much much better! Thank you so much!! Going to implement it into my current work. Can't wait to dive into your other vids!

@griffinbaker964 2 жыл бұрын

this is one of the best vids out there on the topic, thanks so much

@itamarreiter8438 Жыл бұрын

that's the most complicated and crazy hook iv'e seen so far thanks!

@RobiulIslam-dn9mm 2 жыл бұрын

amazing.. it was a very hard part of React for me, but now, it's crystal clear to me after watching Kyle's tutorial. Thanks Brother.

@munirmahmud1415 3 жыл бұрын

I was confused about this hook and even some others but now I am clear and can use where it needs. So, going to watch the other tuts of hooks. Thank you very much for the clarification with a live example

@jaisalshah7731 3 жыл бұрын

The best explanation on this planet so far.... Great Thanks

@jbworshipmoments3831 Жыл бұрын

Very helpful. Thanks for all the great React content! Some of the best I can find on the internet

@victorsmilyborgesalmonte8418 Жыл бұрын

Best explanation in the Internet. Great!!

@klc3rd 2 жыл бұрын

This is an excellent video. I was going through a video guide on react (which was great) but once it got to reducers I got pretty confused. This is super helpful.

@user-sy5fd7kn8w 8 ай бұрын

Great job explaining it! Thank you, this was helpful!

@koordszz 2 жыл бұрын

Kyle, you don't know how much time you've saved me for learning this hook.

@aafighters4535 Жыл бұрын

A single video clears all the concepts

@ecoded3033 3 жыл бұрын

Extremely helpful. Well thought out and great content.

@hasibulhasanhasib3242 2 ай бұрын

This was a very clear tutorial. Thank you very much.

@DimoDimov1 2 жыл бұрын

Fantastic explanation and easy to follow! I only wish that we'd go into then writing tests at the end, as that will differ between just using useState and useReducer as well as it will get us thinking of how we structure our code so it's easier to test.

@waleedkhan5372 3 жыл бұрын

oh man, you save my day, a very precise and detailed video. thumbs up.

@learncodingwithahmet 2 жыл бұрын

great simplicity. Cheers for the video

@mikelan9854 Жыл бұрын

wonderful video , the second example just makes everything clear about useReducer

@monjurmorshed2854 Жыл бұрын

Nicely explained. Thanks for the great tutorial.

@DShazin 2 жыл бұрын

I cant express how great your tutorials are. Thank you

@TheCesarGarciaITPro Жыл бұрын

Awesome vid. I like the examples to help understand not just what it does but how to implement it.

@bushbuddyplatypus 10 ай бұрын

exceptionally clear intro to this topic with a great example. thanks

@musicinsession Жыл бұрын

Mate I've discovered your channel yesterday. I am not a frontend guy, but since yesterday I watched over 10 videos and bought one of courses which btw is flawless!! Love your presenting style and the content!! I have had senior guys in my teams that don't know 1/10th of the things you teach here!! And most importantly you cut to the chase, no BS!! Kudos and keep going!! Thanks for inspiring us!

@WebDevSimplified Жыл бұрын

Thank you so much for the support. I am glad I have been able to help.

@NikosKatsikanis Жыл бұрын

small world dude

@user-cj6te2oj4m 3 жыл бұрын

Finally found exactly what i was looking for. Thanks!

@tedramert785 3 жыл бұрын

Perfect tutorial, thanks man!

@KhoaNguyen-mv2mu 3 жыл бұрын

Just see how smooth you go while you code gives me inspiration to emulate :)

@zakichoudhury8501 Жыл бұрын

Brilliant video for getting introduced to react useReducer hook. Thank you so much.

@hailedagmawi8109 8 ай бұрын

thank you so much for kindly and clearly explaning this hook

@hammam92 3 ай бұрын

I love you man. Amazing explanation. Best react tutor ever

@kalvinwei19 2 жыл бұрын

Thank you, Kyle. Helped a lot!!

@legen_dary42 2 жыл бұрын

Thanks for a great video, this really helped me get a handle on reducer functions.

@tonikroos6895 4 ай бұрын

clear, concise and concrete

@simonfreeman2427 3 жыл бұрын

Thank you for this amazing tutorial. You're a godsend. 😊

@rehanazeem5694 5 ай бұрын

I watched many videos about useReducer but this one cleared all my concepts about it

@prvizpirizad4336 3 жыл бұрын

you have a special skill to explain everything on very simple examples, so you are making it impossible to not to understand.!!

@wokefactory7392 3 жыл бұрын

I finally understand the useReducer API... Thank you!!!

@jasonhuang4333 2 жыл бұрын

Good explanation and demonstration!

@amirhosseinshahabnia 11 ай бұрын

Very on point and helpful, thanks a lot sir!

@nviiriyusuf2609 2 жыл бұрын

This is my first stop whenever I have to learn a new concept in JavaScript...….thanks for simplifying the Web

@EduardKaresli 4 жыл бұрын

That was gold as always. Thanks a lot Kyle!

@learncodingwithahmet 2 жыл бұрын

It's me again. I'm back to tell you how much this video helped me. You are the best !

@abdillahihussein1816 2 жыл бұрын

Amazing lecture, Thank you :)

@Someone-ct2ck 2 жыл бұрын

Thank you, man. This is really web dev simplified.

@rodent569 2 жыл бұрын

BRO, you are GOD! Your explanation is so much better than in the Udemy course I'm taking.

@tentx652 2 жыл бұрын

Great going Buddy, Thanks a ton!!!

@Orhanozkercin35 3 жыл бұрын

This explanation helped me a lot!

@theidanking Жыл бұрын

lover your videos! I finally understand what is useReducer :)

@asylbekibrakhimov459 Жыл бұрын

Thank your very much! I like your way of teaching.

@jacquitratongamanahaja979 2 жыл бұрын

Thank you so much for making this video, it is so helpful.

@justin_t 7 ай бұрын

Very nicely explained!

@santosdejesusmateocamacho3086 Жыл бұрын

I never comment but this time i was impressed by how well you explain and your knowledge, you never disappoint.

@parasmyname784 2 жыл бұрын

Thanks a lot kyle.. awesome explanation ... cleared all the doubts

@AGriffith 2 жыл бұрын

Hey man very cool video, straight to the point and clear!

@gulshan6538 8 ай бұрын

Thank you . I had fun learning.

@enginb3818 Жыл бұрын

Amazing content, brilliant explanation. Everything is great!. Thank you so much, very good job

@Dean-Shepp 3 жыл бұрын

Awesome explanation as always, thanks bud.

@mertdr 2 жыл бұрын

That answers the question in my head : “why would I use useReducer while I have useState” because it’s always being compared to useState or explained with simple increment Function. Instead of saying they’re similar, saying that you can group multiple functions through conditions in a master function in order manage state in various ways, minimize prop drills and coming up with a simple todo app as you did was genious! Thanks man, I learn a lot from your tuts