Flash cards
Review the key moves
What is the main idea behind React useReducer Hook?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___( reducer , initialState , init )Put the learning moves in the order that makes the concept easiest to apply.
The useReducer Hook is similar to the useState Hook.
It allows for custom state logic.
If you find yourself keeping track of multiple pieces of state that rely on complex logic, useReducer may be useful.
Syntax
The useReducer Hook accepts three arguments.
useReducer( reducer , initialState , init )The reducer function contains your custom state logic and the initialState can be a simple value, but generally will contain an object. The init argument is optional and is used to initialize the state.
The useReducer Hook returns the current state and a dispatch method.
Here is an example where we use useReducer to keep track of the score of two players:
Example
import { useReducer } from 'react';
import { createRoot } from 'react-dom/client';
const initialScore = [ {
id: 1, score: 0, name: "John", }, {
id: 2, score: 0, name: "Sally", }, ];
const reducer = (state, action) => {
switch (action.type) {
case "INCREASE": return state.map((player) => {
if (player.id === action.id) {
return { ...player, score: player.score + 1 };
} else {
return player;
}
});
default: return state;
}
};
function Score() {
const [score, dispatch] = useReducer(reducer, initialScore);
const handleIncrease = (player) => {
dispatch({ type: "INCREASE", id: player.id });
};
return ( <> {score.map((player) => ( <div key={player.id}> <label> <input
type="button"
onClick={() => handleIncrease(player)}
value={player.name}
/> {player.score}
</label> </div> ))}
</> );
}
createRoot(document.getElementById('root')).render( <Score /> );