React Hooks Patterns/Complex form with useReducer

Use a reducer when form behavior becomes more complex.

Back to sheet Browse commands

Sign in to save

Section: Forms and Event Patterns

Complex form with useReducer

tsx

tsx

function formReducer(state: FormState, action: FormAction): FormState {
  switch (action.type) {
    case 'change':
      return { ...state, [action.name]: action.value };
    case 'reset':
      return action.initial;
    default:
      return state;
  }
}

Explanation

Reducers become easier to scale than ad hoc state updates for complex forms.

View in sheet →

Learn the surrounding workflow

Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.

Compare commands View fixes

Related commands

Same sheet · prioritizing Forms and Event Patterns

Controlled form state

Manage a form object with useState.

Open In sheettsxsame section

Debounced input value

Delay reactions to rapidly changing values.

Open In sheettsxsame section

Basic custom hook

Extract reusable stateful logic into a function.

Open In sheettsx2 tag match

Track previous value

Store the previous render’s value.

Open In sheettsx2 tag match

Fetch with AbortController

Cancel stale requests on dependency change.

Open In sheettsx2 tag match

Custom hook with options object

Prefer options objects for extensible APIs.

Open In sheettsx2 tag match