In , I gave a basic demonstration of how to manage state with instead of . In this blog, I'll dive into a more complex example. my previous blog useReducer useState When managing state for a form, things can get complex quickly. Take this form, for example: To manage the form's state locally with , it would look something like this: useState const [name, setName] = useState('')
const [title, setTitle] = useState('')
const [favoriteNumber, setFavoriteNumber] = useState('')
const [favoriteColor, setFavoriteColor] = useState('') This might seem manageable enough for now - but if the form needs to grow, one per input will turn your code into spaghetti before you know it! Let's take a look at how we can make state management more scaleable with by using the same steps shown in my : useState useReducer previous blog Define an initial state and an action type. Replace the hook with the hook. useState useReducer Create a reducer function that takes a state and an action and returns a new state. Update the component to use the new state and dispatch functions returned by the hook, which should have the reducer and initial state passed in. useReducer Following the steps above, we can convert our state to state. useState useReducer Define an initial state and an action type: const initialState = {
  name: 'Default name',
  title: 'Default title',
  favorite_number: '3',
  favorite_primary_color: 'red',
};

const INPUT_CHANGE = 'inputChange'; Replace the useState hook with the useReducer hook: import { useReducer } from 'react';

const FormComponent = () => {
  const [formData, setFormData] = useReducer(formReducer, initialState);

  // ...
} Create a reducer function that takes a state and an action and returns a new state: const formReducer = (state, action) => {
  const stateCopy = { ...(state || {}) };

  switch(action.type) {
    case INPUT_CHANGE:
      return {
        ...stateCopy,
        [action.payload.name]: action.payload.value
      }

    default:
      return null;
  }
} Update the component to use the new state and dispatch functions returned by the useReducer hook, which should have the reducer and initial state passed in: const FormComponent = () => {
  const [formData, setFormData] = useReducer(formReducer, initialState);

  const internalOnchange = (type, payload) => {
    setFormData({ type, payload })
  };

  // ...

  return (
    <form>
      <input
        type="text"
        id="name"
        name="name"
        onChange={event => {
          internalOnchange(INPUT_CHANGE, {
            name: event.target.name,
            value: event.target.value,
          });
        }}
      />

    {/* ... */}

    </form>
  );
} Step 4 is a little more complex in this example. In order to pass the type and payload to the reducer cleanly, I've implemented an helper function. Now the can be passed into any input on the form, as shown on the name input above. internalOnchange internalOnchange As long as the name attribute of the input matches the data you want to change, that value in the state will be changed. Now the form can have unlimited inputs with no need to change the state management functionality! ...unless the form gets complex?? Not a problem, you can add another action to your to manage any specialized inputs. To see this form as a completed project, . even more formReducer check it out here on Github I've created the example form explained above - it changes state independently by action, but I've also included an option to change the data as a whole by manipulating the entire JSON directly. This is done by and . This project will look a little different than the blog example since it's done in TypeScript, I wanted to keep things simple in this blog so I explained it in JavaScript. passing the entire changed JSON as the payload here using an updateData action, created here I hope this blog clearly explained using to handle state instead of . If you have any questions or comments, I'd love to hear what you've got! useReducer useState Originally published here.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Real DOM, Virtual DOM, and Shadow DOM: What's the Difference?

Migrating from useState to useReducer in React Hooks

An Advanced Approach to Migrating From useState to useReducer

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Installing Locally Is Easy Using the Makefile: An Apache Superset Guide

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Installing Locally Is Easy Using the Makefile: An Apache Superset Guide

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps