diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md
index ed3dc68c265..ed9fcab082b 100644
--- a/src/content/reference/react/useReducer.md
+++ b/src/content/reference/react/useReducer.md
@@ -65,7 +65,7 @@ The `dispatch` function returned by `useReducer` lets you update the state to a
const [state, dispatch] = useReducer(reducer, { age: 42 });
function handleClick() {
- dispatch({ type: 'incremented_age' });
+ dispatch({ type: 'increment_age' });
// ...
```
@@ -116,7 +116,7 @@ To update what's on the screen, call `dispatch` wi
```js [[2, 2, "dispatch"]]
function handleClick() {
- dispatch({ type: 'incremented_age' });
+ dispatch({ type: 'increment_age' });
}
```
@@ -128,7 +128,7 @@ React will pass the current state and the action to your redu
import { useReducer } from 'react';
function reducer(state, action) {
- if (action.type === 'incremented_age') {
+ if (action.type === 'increment_age') {
return {
age: state.age + 1
};
@@ -142,7 +142,7 @@ export default function Counter() {
return (
<>
@@ -177,7 +177,7 @@ Then you need to fill in the code that will calculate and return the next state.
```js {4-7,10-13}
function reducer(state, action) {
switch (action.type) {
- case 'incremented_age': {
+ case 'increment_age': {
return {
name: state.name,
age: state.age + 1
@@ -201,7 +201,7 @@ function Form() {
const [state, dispatch] = useReducer(reducer, { name: 'Taylor', age: 42 });
function handleButtonClick() {
- dispatch({ type: 'incremented_age' });
+ dispatch({ type: 'increment_age' });
}
function handleInputChange(e) {
@@ -224,7 +224,7 @@ State is read-only. Don't modify any objects or arrays in state:
```js {4,5}
function reducer(state, action) {
switch (action.type) {
- case 'incremented_age': {
+ case 'increment_age': {
// 🚩 Don't mutate an object in state like this:
state.age = state.age + 1;
return state;
@@ -236,7 +236,7 @@ Instead, always return new objects from your reducer:
```js {4-8}
function reducer(state, action) {
switch (action.type) {
- case 'incremented_age': {
+ case 'increment_age': {
// ✅ Instead, return a new object
return {
...state,
@@ -262,7 +262,7 @@ import { useReducer } from 'react';
function reducer(state, action) {
switch (action.type) {
- case 'incremented_age': {
+ case 'increment_age': {
return {
name: state.name,
age: state.age + 1
@@ -284,7 +284,7 @@ export default function Form() {
const [state, dispatch] = useReducer(reducer, initialState);
function handleButtonClick() {
- dispatch({ type: 'incremented_age' });
+ dispatch({ type: 'increment_age' });
}
function handleInputChange(e) {
@@ -947,7 +947,7 @@ Calling the `dispatch` function **does not change state in the running code**:
function handleClick() {
console.log(state.age); // 42
- dispatch({ type: 'incremented_age' }); // Request a re-render with 43
+ dispatch({ type: 'increment_age' }); // Request a re-render with 43
console.log(state.age); // Still 42!
setTimeout(() => {
@@ -961,7 +961,7 @@ This is because [states behaves like a snapshot.](/learn/state-as-a-snapshot) Up
If you need to guess the next state value, you can calculate it manually by calling the reducer yourself:
```js
-const action = { type: 'incremented_age' };
+const action = { type: 'increment_age' };
dispatch(action);
const nextState = reducer(state, action);
@@ -978,7 +978,7 @@ React will **ignore your update if the next state is equal to the previous state
```js {4-5,9-10}
function reducer(state, action) {
switch (action.type) {
- case 'incremented_age': {
+ case 'increment_age': {
// 🚩 Wrong: mutating existing object
state.age++;
return state;
@@ -998,7 +998,7 @@ You mutated an existing `state` object and returned it, so React ignored the upd
```js {4-8,11-15}
function reducer(state, action) {
switch (action.type) {
- case 'incremented_age': {
+ case 'increment_age': {
// ✅ Correct: creating a new object
return {
...state,
@@ -1026,7 +1026,7 @@ Make sure that every `case` branch **copies all of the existing fields** when re
```js {5}
function reducer(state, action) {
switch (action.type) {
- case 'incremented_age': {
+ case 'increment_age': {
return {
...state, // Don't forget this!
age: state.age + 1
@@ -1046,7 +1046,7 @@ If your state unexpectedly becomes `undefined`, you're likely forgetting to `ret
```js {10}
function reducer(state, action) {
switch (action.type) {
- case 'incremented_age': {
+ case 'increment_age': {
// ...
}
case 'edited_name': {