React Hooks useReducer Tutorial

[@teytag8844]

1. Thanks for preemptively answering useState vs useReducer, a lot of guides leave these questions unanswered which causes indecision for people dealing with more architectural problems. 2. Good call on use-immer, didn't know that was a thing, and state.map was running rampant in my cases

[@pjguitar15]

You made it the simplest possible. this is the third video I watch about useReducer, and finally I understand it!

[@georgegeorgio70]

5:08 what is the difference between state++ and state + 1? Why the first one is "mutating" the state and the other one isn't? They both add one just the ++ syntax console.logs the incremented value on "the next line", where as the + 1 syntax console.logs the value updated "on the same line"(if that makes any sense). Im new to js and react, could somebody please clarify? Thx :)

[@MassHypnosis805]

This was exactly what I needed thank you so much. I had an array in an object that I had to change but just couldn't get it right. I was even passing in the index but didn't know how to use it in the reducer function. I spent a lot of time trying to figure out how to update my array. This cleared everything up, in a easy to understand manner. Thank you! I did run into an issue because I had other items in the reducer state besides the array so if anyone is wondering how to use it with many different objects you can change the return statement of 'toggle-todo' to this: return ( {...state, todos: state.todos.map((t, i) => idx === action.idx ? { ...t, completed: !t.completed } : t)} ); This way you can update just the array. A use case for useReducer is to have one state with many different types of objects. So you can easily have the 'text' state in this example as part of a single useReducer as long as you return ...state and the map function.

[@haciendadad]

Great video! I was watching a PluralSight course on Hooks and he never really explained the useReducer, he was using but I couldn't get what the params were referring to, finally I had to come to YT and found this video. In 5 mins, I had my answer and was clear now, plus I learned w whole lot more! I subscribing and coming back here to absorb as much as possible. After looking at Ben's list of videos, man, I feel like I died and went to Coder Heaven! Looking at all the videos, I don't know where to go next? Actually, Next.js is where I want to go next! I think Ben really gets it, so I am staying here, no more course sites. I am between jobs, but when I get one, I'll become a Patreon! Thanks Ben!

[@jordanlam8177]

great teacher! not over complicating anything and straight to the point

[@michaellanning108]

Great tutorial, thank you. I’m finally starting to grasp this.

[@alexandershpilka5848]

What's missing is an example of async logic combined with useReducer. Still a great tutorial. Thank you.

[@nsgirish]

Thanks for the excellent explanation and that smooth coding style

[@nicotomomate]

12:50 I felt you was really enjoying clicking those toggles 😂

[@rohandevaki4349]

at 5:25, why didnt u use state++, please explain in depth, i didnt understand what were you talking about mutating the state, and returning a new state.

[@shubhamh7451]

same! I researched about it to check whether they make duplicate copies or change the same, but I didn't get any, did you find anything?

[@philippalbrecht9023]

Love your teaching style, great pace 👌

[@ahmedroberts4883]

Very clean! You have just helped me tremendously. That was super easy to follow. I have been having conceptual blockers with useReducer up until right now. Much appreciated! You definitely have me as a subscriber.

[@timothyn4699]

Very interesting! The way you explain it makes a lot of sense. Thanks for explaining the ...props

[@vado4003]

VIM inside VSCode, I see you're a man of culture as well

[@Pareshbpatel]

An excellent introduction to useReducer. Thanks. {2021-11-20}

[@mikevaleriano9557]

Man, I can really appreciate how this hook is setup and how people can benefit from this whole new way of doing things in React. But when it comes to state, ever since I started using easy-peasy (it's still Redux, but the whole BS is hidden) I don't even trip about it anymore: Still cool to see the React team thought of everything, but this is one abstraction that easy-peasy made obsolete for me.

[@rohanjain4238]

Ben Awaf 14:46 line 15 you have to decrease the value of toDoCount when the toDo is toggled

[@JeafGilbert]

So basically if we toggle one item, does it re-render all the todo list items? If we have tons of items, how to re-render only the single clicked item?

[@bawad]

kzbin.info/www/bejne/pV7EnYWYoMSthpI

[@carefree_ladka]

What font-family does Ben use in VSCODE?

[@sitter2207]

2:26 why not { dispatch } to call the function when button is clicked, instead of calling it inside a function like you did: { ( ) => dispatch( ) } ?

[@xenopheliac7202]

Very nice video. Might want to note the testability of the pure function over useState.

[@chrisy.703]

what's the syntax for {type: "add-todo", text } -> is it a object or something mixed?

[@funfactor2290]

Nice tutorial, thanks! Where can I ask for advise if I get stuck and I think it's fairly simple..

[@dipinbhattarai5304]

Damn you type fast Ben!

[@MsElsospechoso28]

such a clean explaination

[@LiborPilny]

Thanks Ben, even though it is an older one - still nice and useful - and in easy and straight way ;-) 👍

[@haythamkenway1561]

Hi Ben , can we remove text and setText useState and implement it into the reducer?

[@marcinb7884]

the best teacher ever !!!!!!!!

[@cappsulecorp]

Excellent tutorial, thanks a lot!

[@Mydad-et1el]

Very good video. Thank you Ben!

[@maxandriani]

Thankx for the tutorial. I'm looking a way to use useReducer for async tasks like create/remote resorces from api. Can i use this hook?

[@dreamyrhodes]

Why is it called reducer? That name doesn't make any sense to me.

[@bawad]

stackoverflow.com/questions/40599496/why-is-a-redux-reducer-called-a-reducer

[@creative-commons-videos]

I don't understand one thing, why did you created separated property for todo count, can't we do state.todos.length ???

[@bawad]

Yeah it was just demonstrating the concept

[@harbilito4910]

how to use usereducer if i have an api to store initial state of usereducer?

[@krishind99]

In the first example of counter, how's counter automatically passed as STATE parameter in reducer function?

[@bawad]

that's something useReducer does underneath the hood

[@ibealgoody8524]

Why does every tutorial create the useReducer function in App? Why not in a different file? Is this really best practice?

[@MananGouhari]

super insightful tutorial!

[@chinonsoviktor7777]

I swear...u made it look so easy.

[@zlackbiro]

Somebody struggle with the CSS... 😂

[@expeng5861]

why my reducer has been call 2 times.

[@youneshenni5417]

use immer now comes out of the box with Redux Toolkit.

[@eddiegomez4134]

very helpful! Thanks so much!

[@Cmxmxmmx7]

useReducer(reducer,{todos: [ ]}); right part {todos: [ ]} it this mean array todos inside of an object? or it is just array stored in a variable name todos? can we just write useReducer(reducer,: [ ]); const initialState = { backgroundColor: "orange", circlesArray:[1,2,3,4]} if I have initialState like this. How do I add and remove inside the array using switch statement?

[@bawad]

1. yes 2. if you just want an array then yes 3. [...state, item] state.filter()

[@21agdmnm]

where did that completed:false came from and why do we need it ??

[@bawad]

new todos that get added should not be complete to begin with so we do completed:false

[@alexanderkim7241]

What about 3rd parameter of useReducer hook? Do you use it?

[@bawad]

rarely

[@MandosaWright]

So in a reducer state + 1 Doesn't mutate state? This is madness! :)

[@kmylodarkstar2253]

[state, action] = [getter, setter]?

[@MrPogi-lf5gz]

hey Ben. How do you type so fast? How do you navigate so quickly?Can you do a tutorial on that too?

[@bawad]

vim

[@phoenixultimate8253]

@@bawad How to get good at vim kind sir.

[@ThatGuyAnonymous]

Great video. Can this technique scale for medium/large scale applications? I have been using redux for some time and this method seems like a less painful way of doing so but I feel like there is a catch I might be missing. your thoughts?

[@bawad]

yes, just make sure to keep your state local whenever possible

[@duchoangbui9068]

can someone please help me with this? I got this message when I tried to run the code above: Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component

[@geared_rider]

Recheck your values in this case. Something is undefined and you are changing the state value of an input component to undefined

[@raylom8230]

Very helpful!

[@chrisgiroux9356]

Could someone please explain me to where the type is getting defined in action.type? Is that something that useReducer is doing?

[@bawad]

what you pass into dispatch will become the action

[@chrisgiroux9356]

Ben Awad Awesome thanks Ben. Starting redux in my bootcamp next week and been binging on all your videos. You’re an awesome teacher 😎

[@Joseph-qb1es]

Thanks friend.

[@robertosoriano9617]

Please make an (advanced) Easy Peasy video! where you go over "listening for other actions". Thank you for these tuts!!!

[@bawad]

I will once I do that with easy peasy

[@javierh2k]

Thanks Ben. But, is not better to use objects literal to use the switch

[@bawad]

probably

[@tuRistst]

Hi. Thx for tutorials, but 11:30 my brain is crushed

[@albert21994]

bloody awesome

[@Romanticoneable]

Awesome video, thank you very much! I would like to know how do you delete a selected item on the reducer function. Like in your example if I want to delete the 2nd text item, how should I do it? function reducer { ... case "delete-item": return { todos: state.todos.map((t, idx) => idx === action.idx ? {...t, completed: !c.completed(

[@CTFlink]

you know he's a good programmer when he's using his keyboard to navigate the code more than the mouse 😂

[@leoMC4384]

Good programmer?? There's only 30 lines of code, Einstein.

[@lookintomyeyes2681]

perfecto !

[@kmylodarkstar2253]

const [text, setText] = useState(); >>> line 27 const [text, setText] = useState("");

[@romaniecumtehului6792]

I've watched like 10 videos on useReducer and I still can't understand it. So much functions, objects, states inside the scope, outside the scope. I feel miserable

[@amirchahine1683]

i have a question i already start react native course in udemy and even 47% alot of things i can understand so i neeed material or other to help me to built app

[@bawad]

What do you mean?

[@steve4718]

12:20 .. or just look google..

[@veer1472]

He types faster than I think afaik

[@jhjhj2172]

4:37

[@finsflexin]

If you want to learn it, here’s a better and more updated tutorial by uidotdev m.kzbin.info/www/bejne/jobbgoawpcx0q6s

[@fitimzenuni5036]

#forthealgo

[@martinp7841]

Literally every video uses the same exact example in the docs.

[@hirengajjar2786]

same content , Counter !!!!! it seems all trainer are copying each other content.

[@karma_yogi_42]

why would you use a stupid concept like the immer library?? that would cause a lot of problems if people get into the habit of writing mutable code in react, why not just be a normal developer and write some proper code. >: -[

[@mardikagop9346]

your keyboord voice is very very very annoying, please dont type so fast , you dont need to show as how fast you can type, this is a lesson not a tournament.

[@cosmin4437]

instead of thanking him for making this tutorial, you are complaining about "keyboord voice". P A T H E T I C