useReducer

Learn complex state management with useReducer.

What is useReducer?

useReducer is a hook for complex state management. It is like useState but it updates state through a reducer function. You call it as const [state, dispatch] = useReducer(reducer, initialState).

useReducer is useful when you have several related state fields or complex transition logic. With dispatch you send an action; the reducer looks at it and returns the new state. This pattern puts state changes in one central place; it makes debugging and testing easier. It is a Redux-like approach turned into a React hook.

Three core pieces

useReducer works with three core pieces. First the reducer: a function that takes the current state and an action and returns the new state. Second the initial state: the starting value of state. Third dispatch: the function that sends actions.

A typical flow: when a component notices an event it calls dispatch({ type: "increment" }). React passes this action to the reducer; the reducer computes and returns the new state. The component re-renders with the new state. This flow makes state changes predictable and traceable.

Exercise Call useReducer

Write a Counter component. Call useReducer with reducer and initialState; take state and dispatch from the result. Define reducer and initialState outside the component. The component returns <Text>Counter</Text>.

Show example solution

import { useReducer } from "react";
import { Text } from "react-native";

function reducer(state, action) {
  return state;
}

const initialState = 0;

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return <Text>Counter</Text>;
}

Test yourself

What is useReducer used for?
```
const [state, dispatch] = useReducer(reducer, initialState);
```
- For AsyncStorage
- To style the component
- For navigation
- For complex state management
Show answer

For complex state management — useReducer is used for complex state management.

Call useReducer

const [state, dispatch] = ____(reducer, initialState);

Show answer

const [state, dispatch] = useReducer(reducer, initialState);

Match each piece to its role

reducer

Computes state
initialState

Starting value
dispatch

Sends an action
action

Describes an event

Next lesson: Reducer function

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies