Learn useReducer In 20 Minutes

[@thesuperiorman8342]

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

[@dl88889]

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

[@hailedagmawi8109]

Can't believe I comeback to this video again after 1 year. I bumped with useReducer in a react project and relized I completely frogot about how it works. Thank you again Kyle!!

[@nickmee8731]

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

[@negatif9163]

is he Junior developer? 🤔

[@RickyGarcia_Learning]

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]

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

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

[@SupunPraneeth]

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.

[@mertdr]

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

[@lodoss118]

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

[@kisnasur2145]

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

[@devc.krishna8573]

Its the best react hooks series on the entire internet

[@laynetaylor7768]

I spent like two days on a udemy course trying to understand this concept and the guy was WAY overcomplicating it and this video saved my life lol, someone from that course linked this video in the lecture comments and it's the ONLY way I got past that part of the course. THANK YOU

[@himalyanomad9450]

was that course : React the complete guide by maximillian?

[@joelmatthews3255]

Yup, same story for me. And yes, it was Max from Academind.

[@rohmaabdulfattah2582]

I left his course because of overcomplicating examples.. He is too fast and doesn't simplify things

[@mohammedalmukhtar8949]

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!

[@bekiGYD]

1 Million tanks from Ethiopia

[@PenguinjitsuX]

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.

[@ridl27]

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

[@temzeks]

we can make one

[@iJuce]

@@temzeks ok go make one ! :D

[@zetaalpha3319]

pls check Full React Course in description

[@ridl27]

@@zetaalpha3319 bruh.

[@nviiriyusuf2609]

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

[@cryptonite6000]

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

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

[@ealamtaher6050]

thanks a useReducer has never been more clear

[@ytrtricks]

You have done such a fantastic explanation 🎉🎉🎉 I have watched Indian channels code with Harry thappa technical but I never understood But yours explanation was best

[@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.

[@hoangcuongtran4606]

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

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

[@rehanazeem5694]

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

[@zorawarsingh11]

Bro literally has best voice of any of these tutorials videos.

[@shubhobanerjee3458]

His way of explanation is filled with soo much confidence and experience, at times it gives me a feeling that its him, who has introduced a particular technology into the software industry. Be it the explanation of ANY framework/library/Programming language..etc . you try to learn from him. Pure Amazing work Kyle. You're the best tutor I've come across the whole internet who explains stuffs in such a simplified manner.❤👏

[@SpaceMarine113]

yeah i do question sometimes, dafuck he does all day, reads the documentation? seems impossible to know so well some stuff he shows, especially since some of it is barely out yet.

[@mma-dost]

Great tutorial Kyle . For beginners second to-do example might be difficult but dont give up try to understand today tomorrow until you get it and watch this video 2-3 times and read some articles on the internet.

[@MarshallBanananana]

Best explanation out of four, I watched so far.

[@rodent569]

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

[@stumpedtroper]

This is incredible. I'm pretty new to react. I once tried using useState for a complicated state and ended up abandoning the project lol. UseReducer was exactly what I was trying to do with useState then.

[@koordszz]

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

[@Enes-ik4bm]

Respect from Turkey. Your teaching skill is very good 🙂

[@aafighters4535]

A single video clears all the concepts

[@prvizpirizad4336]

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

[@Amitverma-mb4tu]

Not aware of your experience and others but me as a sr. developers find your videos quiet useful.

[@pavankjadda]

I have always had an issue in wrapping my head around State Management. After watching this not only I got familiar but understood state management concepts in general. I was able read and implement Redux (In Production) after watching this. After seeing the benefits, I went ahead implemented state management in Angular(Akita) application(In Production). You should do another video on Redux with Redux Toolkit. It would benefit many people like me.

[@hugoperez1318]

Dude, useReducer just blew my mind. After building an app with more than 20 functions that update the state being passed around, just a useReducer would have been so much better. Great explanation Kyle! So much better than going through the pain of Redux while keeping the benefits of state management

[@petiks6391]

I'm new to reducers and Redux but I don't understand why one needs Redux over useReducer

[@hugoperez1318]

@@petiks6391 Redux scales really nicely. It is a better choice for bigger apps.

[@petiks6391]

@@hugoperez1318 I see. Thank you

[@nelsonfleig5024]

Can you please do a video on some flux design patterns with Context, useReducer, and async calls to an API? Im trying to replace Redux and Thunk with pure React hooks. Thank you for your videos!

[@farhanvk7586]

Is it possible to completely replace redux with react hooks? like for global state management?

[@Andrewiththeaudi]

@@farhanvk7586 As far as I understand it, Redux creates a global store for your app, and there is no convenient way of doing that with just hooks. But you can capture some state in one component with useContext, and then import that state in any other component and use it there.

[@paritoshbatish9984]

@@Andrewiththeaudi yes, if context API works then use it. kzbin.info/www/bejne/oniZi2N8hs-Sias This video gives a good explanation of context API and some other react tips.

[@TheAdel136]

you can replace redux by using useContext combined with useReducer i recomand you to watch codeEvolution channel to learn more about that ;)

[@learncodingwithahmet]

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

[@shurui91]

"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

[@satya-lifevlogs]

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

[@leanprogrammer]

This is basically redux, great stuff

[@DuyTran-ss4lu]

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

[@leylakanaan3912]

GREATEST ONE AT ALL. I was taking a course in 'UDEMY' and he was teaching useReducer but personally I didn't understand anything. This one was so helpful Thank you for your effort and for simplifying the web for us ^ ^ ;

[@santosdejesusmateocamacho3086]

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

[@pqrsandeshbackup]

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

[@tejasmandre666]

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

[@zevspitz8925]

7:29 If you're already using Typescript, another alternative would be to define type as 'increment' | 'decrement'

[@njayman]

Best react hooks tutorial

[@edoardocasella8169]

I agree

[@thatsinteresting8479]

your lecture's are exaptational and easy to understand, my only suggestion is please provide the Git code also

[@praveenkg725]

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

[@munirmahmud1415]

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

[@martapfahl940]

Even if my native language is German and not English, you explain React in such great quality that it is an ease for me to understand all of these concepts, thanks Kyle!

[@codenamegrant]

Personally, I prefer to create those helper functions (toggleTodo, deleteTodo) instead of just sending the dispatch method down. Actions that are available can be more explicit than just exposing the entire dispatch method. Awesome tutorial series Kyle, thanks a bunch.

[@michalvarys2947]

That's the right approach in my opinion... It makes the dumb component cleaner and keeps the logic in one place

[@chunkwanchan5503]

same lol

[@daveliew]

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

[@joelwalkley3902]

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

[@Bellathor]

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.

[@dubskiski4964]

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

[@RobiulIslam-dn9mm]

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.

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

[@itamarreiter8438]

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

[@whiskers08spot09]

I found it interesting that you imported the ACTIONS object instead of passing it down as props.

[@jaisalshah7731]

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

[@adtc]

Thank you so much for explaining how we pass one `dispatch` function instead of many different handlers. So far in the major project I'm working on, I've only see useReducer used for context providers, and nothing else. And I've seen several places where handleX, handleY, and handleZ are passed in. I think this could be useful to refactor.

[@js_programmer8423]

I'm convinced this guy's an Web Developer Alien.. he's just perfect at everything including life.

[@klc3rd]

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.

[@bushbuddyplatypus]

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

[@victorsmilyborgesalmonte8418]

Best explanation in the Internet. Great!!

[@azatecas]

dude you are killing it with react tutorials

[@aammssaamm]

he copies them from other dudes

[@azatecas]

@@aammssaamm this is open source knowledge, you can find this information in the documentation and various articles online all he is doing is explaining it and "simplifying" it

[@aammssaamm]

@@azatecas no, he is copying other dev's videos made long time ago

[@azatecas]

@@aammssaamm can you link to another tutorial to contrast and compare the videos?

[@aammssaamm]

@@azatecas you can easily find them by searching unless you have no idea about how to LOL

[@liamsmith-yp3xh]

just for those who havent done much with switch or also people who are working with objects and having a hard time, the case its self is a function so you can do case ACTIONS.add:{ some logic in here, return new reducer value} i had a hard time figuring out how to manipulate objects, after a lot of trial and error i figured out this is how you could manipulate it case ACTIONS.add :{ state[payload.key]= payload.value; return {...state} } for some reason you have to return a clone of what ever you want to send back, something to do with sending it a shallow copy probably, but that works , manipulate state input locally within the case function and return clone of the state

[@zakichoudhury8501]

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

[@Muhyideen869]

Thank you! took my professor 2 hours to deliver the same info

[@jadalhamwi1543]

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

[@alyssadeng6462]

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!

[@VinnieBrazelton13]

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!

[@lothuts]

Basically... teach us react-redux without actually teaching react-redux. Great video and hook tutorial!

[@devilstrela]

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

[@ucanh5104]

Thank you very much, although I am Vietnamese, when I read materials on this issue in Vietnamese, I found it somewhat difficult to understand. But it's strange that when I watched your video in English, I understood it very clearly.

[@HarveyXE]

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.

[@jimhawkins2483]

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

[@mirabbosbotirjonov]

This is how fbp (function based programming) works Kyle it would be great video to those who are learning resux or useReducer if you teach a fbp

[@DimoDimov1]

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.

[@sinc1802]

I expected to receive copper yet I have found gold. GREAT VIDEO!!

[@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!

[@dho1115]

Hello... I do have one question. Given the fact that useReducer is very similar to Redux, how do you decide when to use Redux over useReducer (or vice versa)? Will there be times where you will choose one over the other? Thank you so much for this very informative and easy to understand video!

[@johnathannichols6003]

According to Kyle's other comments, he never uses Redux. In his personal projects he has completely replaced Redux with useReducer. Don't take my work for it, read the other comments too.

[@dho1115]

@@johnathannichols6003 Thanks.

[@rBroneak]

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!

[@mikelan9854]

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

[@kazak4761]

Great explanation, took me a couple tutorials to understand why you use this hook rather then use.state, think i need to practice a little more with its use but really starting to get to grips with react, thanks!

[@overcolck777]

10000000000000000000000 likes for this explanation. Kudos!!

[@OsundareToheeb]

first 2 minutes, and i can say the is the best explanation of useReducer

[@hammam92]

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

[@tonkhao_gaming]

thank for the easy explanation, but one thing I dont understand is how is that that you are rendering JSX but ur files are .js, I thought react cannot render js files :)

[@easterling9489]

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

[@fluttterdev1k]

thank you the best among the besties

[@papa_ethan]

@6:30 another nice way to create a symbol for like 'const INCREMENT = Symbol()' and same with the 'DECREMENT'

[@griffinbaker964]

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

[@KhoaNguyen-mv2mu]

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

[@abdillahihussein1816]

Amazing lecture, Thank you :)

[@simdanofficial]

This is one of my favorite channels, thanks for everything

[@chemedev]

Outstanding explanation, got a little question... what's the difference between using useReducer and redux-thunk, redux-saga, etc?

[@myfav3449]

You can't really compare useReducer with Redux-Thunk or Redux-Saga. useReducer is only meant for handling the state and dispatching actions, it can certainly replace redux. Redux-Thunk is mainly used to dispatch actions asynchronously with a function called "action creators" rather than running the action directly which simply returns the object containing your state. Redux-Saga has similar features to Redux-Thunk, but add better features like accessing the browser cache, the use of generators and much more. However there is no need for that now in my opinion since you have the power of javascript with promises at your disposal right in the component

[@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.

[@hasibulhasanhasib3242]

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