React Hooks useReducer Tutorial

Learn how to use the useReducer hook in React.

Links from video:

----

----

----

----
Follow Me Online Here:

#benawad
​
----
#benawad

[teytag]

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

[pjguitar]

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

[MassHypnosis]

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.

[alexandershpilka]

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

[michaellanning]

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

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

[nicotomomate]

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

[ahmedroberts]

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.

[jordanlam]

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

[nsgirish]

Thanks for the excellent explanation and that smooth coding style

[mikevaleriano]

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.

[philippalbrecht]

Love your teaching style, great pace 👌

[timothyn]

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

[Pareshbpatel]

An excellent introduction to useReducer. Thanks.

{2021-11-20}

[vado]

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

[xenopheliac]

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

[LiborPilny]

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

[georgegeorgio]

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

[rohandevaki]

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.

[funfactor]

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