‫To finish this section,
‫let's review what we learned
‫about useReducer by comparing it with useState
‫both in terms of how they work
‫and when we should use each of them.
‫So as we already know,
‫useState is ideal for single pieces
‫of state that are independent from each other.
‫So things like numbers, strings
‫and also arrays or simple objects.
‫On the other hand, we reach
‫for useReducer when we have
‫multiple pieces of state
‫that are related and dependent on each other
‫or when we have some really complex state on our hand.
‫Now, when we have a few states
‫with useState the logic
‫to update that state
‫is usually placed right into event handlers
‫or effects.
‫And these might be spread all
‫over the component
‫or even located in child components
‫if we're using lifted state.
‫And that's where one of the big advantages
‫of useReduce comes into play
‫because with useReduce
‫we centralize all state updating logic
‫in one place
‫which is the reducer function.
‫And with this
‫all that logic is nicely decoupled
‫from the components.
‫Then whenever we need
‫to update the state
‫we just dispatch an action to the reducer,
‫which knows exactly
‫how to perform state updates
‫for different actions.
‫So essentially reducers
‫map state transitions to actions
‫with well-defined names,
‫which makes them a lot more declarative.
‫And going back to the game example
‫from the first lecture
‫instead of setting three separate states
‫like these in order to start a game,
‫we can just dispatch the action
‫startGame and the reducer
‫will then take care of the rest.
‫And this really is an amazing pattern.
‫The only downside of this approach
‫is that it can be
‫a bit more difficult to understand
‫and to implement.
‫It can take a bit more time,
‫but that might be worth it.
‫Now just finishing our comparison here,
‫with useState of course
‫we do not dispatch any actions.
‫All we do is direct the updating state
‫by calling the setState function,
‫which leaves us
‫with state updates that feel a lot more imperative
‫when compared to dispatching an action.
‫But on the bright side,
‫this of course is a lot easier
‫to understand and to use
‫because we don't have to
‫write any reducer function.
‫And most of the time
‫this is completely fine.
‫And so then useState
‫is the way to go
‫and that this actually
‫brings us to our next and final slide
‫where I'm now gonna give you a simple framework
‫for deciding between useState and useReducer
‫whenever you need to add state to a component.
‫So the first and most obvious question to ask ourselves
‫is whether we only need one piece of state.
‫If that's the case,
‫then the answer is very simple.
‫We just use one useState hook and call it a day.
‫Now, if we do need more
‫than just one piece of state
‫the next question to ask
‫is do my states frequently need to be updated together?
‫So just like in that game example from earlier.
‫And if the answer is yes
‫then we might have a good use case
‫for a useReducer.
‫However, there's probably one more question
‫that we need to ask first.
‫Are we willing to actually write a slightly
‫more complex useReducer hook
‫with a reducer function?
‫And if we are not
‫then we just keep using
‫the useState hook.
‫But if we are okay with
‫taking the time to write a reducer
‫then this is definitely a good use case
‫for useReducer.
‫Nice. So let's keep going.
‫If our state does not update frequently together
‫then the next step is to figure out
‫whether we need more than three or four pieces
‫of related state
‫and whether that state even includes some objects.
‫So this is what we can call
‫complex state.
‫So in this case
‫and if we're willing to actually write a reducer
‫then useReducer is again the way to go.
‫Finally, our state might actually
‫not be that complex
‫but we still feel like we have
‫way too many event handlers
‫that make the component
‫and also its child components
‫too large and too confusing.
‫In that case
‫you might also consider going with useReducer.
‫Otherwise, if the question is no again,
‫then useState is once again the way to go.
‫So in general, even after learning about useReducer
‫useState should probably still remain your default choice
‫for managing React state.
‫But if useState gives you one of these problems
‫that we have been talking about
‫then it's time to consider a useReducer.
‫And that's actually it.
‫So at this point, you are probably
‫in the top 5% of React developers
‫when it comes to understanding the useReducer hook.
‫So you are making excellent progress, really.
‫And now to finish it's time to practice
‫the useReducer hook
‫on your own.