---
title: How useReducer Simplifies Complex Form Logic
description: Learn how to manage complex form logic in React with useReducer, including an undo feature, without needing Redux. Get expert guidance with Bitovi's React consulting services.
image: https://www.bitovi.com/hubfs/How-useReducer-Simplifies-Complex-Form-Logic.png
---
- 
[AI implementation](https://www.bitovi.com/services/ai-consulting)
- 
[Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting)
- 
[Project Management](https://www.bitovi.com/services/agile-project-management-consulting)
- 
[Product Design](https://www.bitovi.com/services/product-design-consulting)
- 
[Frontend development](https://www.bitovi.com/services/frontend-development-consulting)
- [View more
→
](https://www.bitovi.com/digital-consulting-services)
We're Experts in...
- [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting)
- [AI training](https://www.bitovi.com/ai-training-for-software-engineers)
- [Angular](https://www.bitovi.com/services/frontend/angular-consulting)
- [Design systems](https://www.bitovi.com/services/axure-figma-migration)
- [React](https://www.bitovi.com/services/frontend/react-consulting)
- [Temporal](https://www.bitovi.com/services/backend/temporal-consulting)
- [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native)
- [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting)
Showcase
[View case study](https://www.bitovi.com/en/bitovi-yum-case-study)
More Projects
- [](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign)
- [](https://design.bitovi.com/christies)
- [](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp)
- [View more
→
](https://www.bitovi.com/our-software-consulting-work)
Open Source Tools
We build powerful tools and open source them to support the community.
[See what we've built →](https://www.bitovi.com/open-source)
- [
BlogWe post about delivering products and solving problems.
](https://www.bitovi.com/blog)
- [
PartnershipsLearn about Bitovi's technology partners
](https://www.bitovi.com/partnerships)
- [.svg)
AcademyFree courses to build delivery skills
](https://www.bitovi.com/academy)
- [
Open source toolsUse or contribute to our community
](https://www.bitovi.com/open-source)
Let's Connect
- [
Discord
](https://discord.gg/J7ejFsZnJ4)
- [
LinkedIn
](https://www.linkedin.com/company/bitovi/)
- [
GitHub
](https://github.com/bitovi/)
Name *
Work Email *
Phone
What's your project?
Send
### Contact Us
(312) 620-0386contact@bitovi.com
[ React ](https://www.bitovi.com/blog/topic/react) | September 17, 2025
# How useReducer Simplifies Complex Form Logic
Learn how to manage complex form logic in React with useReducer, including an undo feature, without needing Redux. Get expert guidance with Bitovi's React consulting services.
Kyle Nazario
Share:
[ ](https://twitter.com/intent/tweet?text=) [ ](http://reddit.com/submit?url=)
I recently had the chance to build a moderately complex React form. Instead of scattering the form logic across multiple components, I consolidated it in a single shared store using `useReducer`.
This approach proved helpful for this particular case: the reducer encapsulated all the form logic without requiring a global state manager like Redux.
Here’s the breakdown.
[ ](https://www.bitovi.com/hs/cta/wi/redirect?encryptedPayload=AVxigLLkKehtPD2hWBJxHWsjlsdNRYQfZNLDyCkp%2FGMp1ZjCjwMOWjR5IDf5%2B8%2Fmd9GIMjBf66SnC5MCsIljvpbGmXmXqtsp66FA0kJArWrCA%2F%2B1c2yAkDNJY9lVpGGVbBh55uwJcx3j1XPoACbUF3rSfbBmVeU26nmsKtHpGwx71VEUoYqacaxAHjlG8IUrzX%2FG1ipJ%2B2t2ks8hi8MbWA%3D%3D&webInteractiveContentId=175018652315&portalId=2171535)
## Background
I created a small demo app ([source](https://github.com/kyle-n/ShoppingList), [live demo](https://stackblitz.com/github/kyle-n/ShoppingList)) to illustrate the problem. Imagine you’re building a shopping list web app.
The app has five main features:
1. Users can enter an item name in a text field.
2. Pressing **Enter** or tapping **Add** inserts the item into their shopping list.
3. A **Delete** button lets them remove items when purchased.
4. Each item is editable via a text field.
5. An **Undo** button reverses the last change.
The `` component holds the store and passes callbacks to low-logic display components.
```
function App() {
const [state, dispatch] = useReducer(globalStateReducer, initialGlobalState);
const addItem = useCallback(
(newItem: Item) => dispatch({ type: 'addItem', newItem }),
[dispatch]
);
const deleteItem = useCallback(
(id: string) => dispatch({ type: 'deleteItem', id }),
[dispatch]
);
const updateName = useCallback(
(id: string, newName: string) =>
dispatch({ type: 'updateName', id, newName }),
[dispatch]
);
const undo = useCallback(() => dispatch({ type: 'undo' }), []);
return (
<>
);
}
```
### Why `useReducer`?
At first glance, this looks simple enough for `useState`. But the undo button complicates things. To implement undo, we must track **both** the current list and the actions that modified it.
We could try syncing multiple states manually, but this is exactly where a Redux-style pattern shines: consolidating higher-order state management.
Here’s the reducer setup:
```
type GlobalState = {
items: Item[];
events: Array<{
action: Action;
previousValue?: unknown;
}>;
};
export const initialGlobalState: GlobalState = {
items: [],
events: []
};
export type Action =
| { type: 'addItem'; newItem: Item }
| { type: 'deleteItem'; id: string }
| { type: 'updateName'; id: string; newName: string }
| { type: 'undo' };
```
The reducer updates `items` and logs actions to an `events` stack. Undoing simply replays the last event in reverse.
```
function undoActionReducer(state: GlobalState): GlobalState {
const newState = structuredClone(state);
const lastEvent = newState.events.pop()!;
const { action } = lastEvent;
switch (action.type) {
case 'addItem':
return {
...newState,
items: newState.items.filter(item => item.id !== action.newItem.id)
};
case 'deleteItem': {
const deletedItem = lastEvent.previousValue as Item;
return { ...newState, items: [...newState.items, deletedItem] };
}
case 'updateName': {
const previousName = lastEvent.previousValue as string;
return {
...newState,
items: newState.items.map(item =>
item.id === action.id ? { ...item, name: previousName } : item
)
};
}
default:
return newState;
}
}
```
This pattern scales neatly. Need to enforce duplicate checks or filter forbidden names? The reducer becomes a central, testable hub for all business rules.
### Key Takeaways
- `useReducer` allows encapsulating complex form logic in a single location.
- Undo functionality benefits from a reducer-driven event stack.
- The UI stays clean while the state logic grows more robust.
### Need Expert Help with React?
If you’re tackling complex React forms or building large-scale applications, Bitovi’s React consulting services can help. Our experts have guided Fortune 100 companies and startups alike through advanced state management, performance tuning, and scalable architecture.
Talk to our [**React consultants**](https://www.bitovi.com/services/frontend/react-consulting) today and accelerate your project with proven expertise.
---
[ frontend engineering ](https://www.bitovi.com/blog/topic/frontend-engineering)
Previous Post
 [ Comparing AI Documentation Engines: DeepWiki vs Code2Tutorial ](https://www.bitovi.com/blog/comparing-ai-documentation-engines-deepwiki-vs-code2tutorial)
Next Post
 [ Getting Started with Sitefinity CMS: A Developer’s Perspective ](https://www.bitovi.com/blog/getting-started-with-sitefinity-cms)
```json
{
"@context" : "http://schema.org",
"@type" : "Organization",
"address" : {
"@type" : "PostalAddress",
"addressCountry" : "United States",
"addressLocality" : "Libertyville",
"addressRegion" : "IL",
"postalCode" : "60048",
"streetAddress" : "1134 Pine Tree Lane "
},
"alternateName" : "Bitovi",
"areaServed" : {
"@type" : "GeoCircle",
"geoMidpoint" : {
"@type" : "GeoCoordinates",
"latitude" : "41.8781",
"longitude" : "87.6298"
},
"geoRadius" : "5000 km"
},
"description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company",
"email" : "contact@bitovi.com",
"image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png",
"logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg",
"mainEntityOfPage" : {
"@id" : "https://www.bitovi.com/blog/how-usereducer-simplifies-complex-form-logic",
"@type" : "WebPage",
"description" : "Learn how to manage complex form logic in React with useReducer, including an undo feature, without needing Redux. Get expert guidance with Bitovi's React consulting services."
},
"naics" : "541511",
"name" : "Bitovi Web App Consulting",
"sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ],
"telephone" : "312-620-0386",
"url" : "http://bitovi.com"
}
```
```json
{
"@context" : "http://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Kyle Nazario"
},
"dateModified" : "September 17, 2025, 6:22:09 PM",
"datePublished" : "2025-09-17 18:22:09",
"description" : "Learn how to manage complex form logic in React with useReducer, including an undo feature, without needing Redux. Get expert guidance with Bitovi's React consulting services.",
"headline" : "How useReducer Simplifies Complex Form Logic",
"image" : {
"@type" : "ImageObject",
"url" : "https://www.bitovi.com/hubfs/How-useReducer-Simplifies-Complex-Form-Logic.png"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg"
},
"name" : "Bitovi"
}
}
```
```json
{
"@context" : "https://schema.org",
"@type" : "TechArticle",
"author" : {
"@type" : "Person",
"name" : "Kyle Nazario"
},
"datePublished" : "2025-09-18",
"description" : "Learn how to manage complex form logic in React with useReducer, including an undo feature, without needing Redux. Get expert guidance with Bitovi's React consulting services.",
"headline" : "Managing Complex React Forms with useReducer",
"keywords" : [ "React forms", "useReducer", "undo functionality", "state management", "shopping list demo", "React consulting" ],
"mainEntityOfPage" : {
"@id" : "https://www.bitovi.com/blog/how-usereducer-simplifies-complex-form-logic",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"name" : "Bitovi"
}
}
```