All 5 useReducer & Complex State Logic questions
More in useReducer & Complex State Logic
What is the basic structure of a reducer function used with the useReducer hook? How would you manage a multi step form's state using useReducer instead of several separate useState calls? How do you pass extra data along with an action when using useReducer? How would you combine useReducer with the Context API to share complex state across many components?
Advertisement
Back to results for “Forms”
React › useReducer & Complex State Logic

When should you choose useReducer over useState for managing a component's state?

Beginner

Answer

useReducer becomes a better fit when a component has several related pieces of state that often update together, or when the logic for updating state grows complicated enough that keeping it in one clearly organized function, rather than scattered across many event handlers, makes the code easier to follow.
// Simple, independent value, useState is enough
const [isOpen, setIsOpen] = useState(false);

// Several related values updating together, useReducer fits better
const [state, dispatch] = useReducer(formReducer, { name: '', email: '', errors: {} });
Real-world example A simple toggle switch component keeps using useState since it only tracks one independent value, while a complex settings form with many interdependent fields switches to useReducer to keep its update logic organized in one place.

Common follow-ups: Is there ever a real performance difference between choosing useState versus useReducer?;Can a component use both useState and useReducer together for different pieces of its state?

Hooks;Forms: Controlled & Uncontrolled Components
All 5 useReducer & Complex State Logic questions