Slide 1
-----------
Slide 2
-----------
Part 1: The useReducer hook is an alternative to useState for managing state in React functional components. It is particularly useful for complex state logic involving multiple sub-states or when the next state depends on the previous state.
Part 2: With useState you have to define a state update function per each state variable. With useReducer, you use an independent reducer function to determine state changes. More on this later.
Part 3: useState hold only a single piece of state, while useReducer defines the state, the dispatch and reducer function. A little more to worry about but simplifies things in complex states.
Part 4: Last, with a complex state useState can become messy with multiple setState functions. Also, it is difficult to test the functionality of state change. With useReducer, all state changes are neatly organised into a single function.
Slide 3
-----------
Part 1: Let’s refactor an example with a simple word counter delete, and reset actions evolve from useState to useReducer.
Part 2: We use two state variables, word and count, holding the word length.
Part 3: In the change handler, we update both state variables
Part 4: In the delete handler we remove one letter from the end if possible and update count
Part 5: The reset handler resets to an empty word.
Part 6: The form provides the text input and buttons to handle delete and reset.
Part 7: Already, we can see that adding many other handlers can lead to spaghetti code and confusion. Let's simplify this!
Slide 4
-----------
Part 1: Let's convert the useState example to useReducer. We make sure everything is type safe and first we define the shape of our state, containing the word and count of its letters.
Part 2: Then, we define all the actions we want our reducer to support. As you add more functionality, you add a new function name and shape of the passed parameters.
Part 3: Then, we define the reducer, which accepts two parameters: the current state and the action being dispatched. The action contains two properties: the type or name of the action and the value, which is the payload of the action. Now, we onlyt have to implement a functionality for each action type, in our case ...
Part 4: ...changing the word and recalculating word length ...
Part 5: ... deleting the last letter ...
Part 6: ...resetting the word ...
Part 7: ... and also checking if we handled all the possible cases. Typescript is very helpful in this case, as dispatching a wrong action name shows compile time error.
Part 8: The form now becomes much simpler. Firsr, we initialise the state and dispatch dispatch function using the useReducer hook.
Part 9: Last, instead of calling setState, we dispatch the correct action identified by type with the required value.
Slide 5
-----------
Part 1: Overall, useReducer prides several advantages over useState, but it's up to you if you decide to use it.
Part 2: useReducer delivers cleaner state management for complex logic.
Part 3: Centralized state transitions in a single reducer function.
Part 4: Easier to debug and test state logic independently on your component
Part 5: Scales much better when adding more actions or state properties.
The useReducer hook is an alternative to useState for managing state in React
functional components. It is particularly useful for complex state logic
involving multiple sub-states or when the next state depends on the previous
state.
--------------------------------------------------------------------------------
KEY DIFFERENCES BETWEEN USESTATE AND USEREDUCER
FeatureuseStateuseReducerComplexityIdeal for simple state logicSuitable for
complex state logicState UpdatesDirectly set state via updaterUse a reducer
function to determine state changesStructureSingle piece of stateState +
Dispatch + Reducer FunctionScalabilityCan become messy with multiple
statesOrganizes updates into a single function
--------------------------------------------------------------------------------
WHEN TO USE USEREDUCER OVER USESTATE
* When state logic is complex or interdependent.
* When state updates involve multiple actions.
* When you need a clean way to handle state transitions (like in a finite state
machine).
--------------------------------------------------------------------------------
EXAMPLE: FROM USESTATE TO USEREDUCER
Let’s refactor an example where a simple word counter with delete and reset
actions evolves from useState to useReducer.
--------------------------------------------------------------------------------
STEP 1: USING USESTATE
Here’s a counter example with useState:
import React, { render, useState } from "react";
const CounterWithState = () => {
const [count, setCount] = useState(0);
const [word, setWord] = useState("");
function changeHandler(e) {
setWord(e.currentTarget.value);
setCount(e.currentTarget.value.length);
}
function del() {
if (word.length) {
setWord(word.slice(0, -1));
setCount(count - 1);
}
}
function reset() {
setWord("");
setCount(0)
}
return (
<div>
<h1>Counter with useState</h1>
<p>Letters: {count}</p>
<input value={word} onChange={changeHandler} />
<button onClick={del}>Delete</button>
<button onClick={reset}>Reset</button>
</div>
);
};
render(<CounterWithState />)
--------------------------------------------------------------------------------
STEP 2: REFACTOR TO USEREDUCER
Here, we replace useState with useReducer for a cleaner and more scalable
approach.
--------------------------------------------------------------------------------
1. DEFINE THE REDUCER FUNCTION
The reducer function determines how state changes based on an action.
type State = {
word: string,
count: number
}
type Action =
| { type: 'WORD', value: string }
| { type: 'DELETE' }
| { type: 'RESET' }
const reducer = (state: State, action: Action) => {
switch (action.type) {
case "WORD":
return { count: action.value.length, word: action.value };
case "DELETE":
return state.word.length
? { count: state.count - 1, word: state.word.splice(0, -1) }
: state;
case "RESET":
return { word: '', count: 0 };
default:
throw new Error("Action not handled");
}
};
--------------------------------------------------------------------------------
2. IMPLEMENT THE COMPONENT
Here’s the updated counter using useReducer:
Copy code
import React, { useReducer } from "react";
const CounterWithReducer = () => {
const [state, dispatch] = useReducer(reducer, { count: 0, word: "" });
return (
<div>
<h1>Counter with useState</h1>
<p>Letters: {state.count}</p>
<input value={state.word} onChange={(e) => dispatch('WORD', e.currentTarget.value)} />
<button onClick={() => dispatch('DELETE')}>Delete</button>
<button onClick={() => dispatch('RESET')}>Reset</button>
</div>
);
};
export default CounterWithReducer;
--------------------------------------------------------------------------------
HOW IT WORKS:
1. Reducer Function: Handles all state transitions based on the action's type.
2. Initial State: { count: 0, word: “” } is passed as the initial state to
useReducer.
3. Dispatch: Instead of calling setState, we call dispatch with an action
object.
--------------------------------------------------------------------------------
ADVANTAGES OF USEREDUCER OVER USESTATE:
* Cleaner state management for complex logic.
* Centralized state transitions in a single reducer function.
* Easier to debug and test state logic.
* Scalability when adding more actions or state properties.
* Easier to test independently on React
--------------------------------------------------------------------------------
EXAMPLE COMPARISON: BEFORE AND AFTER
FeatureuseState ExampleuseReducer ExampleState StructureSingle state
variableCentralized state objectUpdate LogicSpread across multiple setState
callsEncapsulated in the reducer functionState UpdatesDirect calls to
setStatedispatch triggers state updates
--------------------------------------------------------------------------------
CONCLUSION
* useState is great for simple scenarios with minimal state logic.
* useReducer is a powerful tool for managing complex state logic and actions.
This refactoring demonstrates how useReducer provides better structure, cleaner
code, and enhanced scalability for complex state management. Let me know if
you'd like a more advanced example! 🚀
Maggie is a generative AI that can help you understand the course content better. You can ask her questions about the lecture, and she will try to answer them. You can also see the questions asked by other students and her responses.
Join the discussion to ask questions, share your thoughts, and discuss with other learners
SkillPies