How to Build Multistep Forms in React

A simple, practical way to handle multistep forms with no heavy libraries, just React hooks.

May 22nd, 2025 12:00pm by Vinod Pal

Featued image for: How to Build Multistep Forms in React

Image from Julia Tim on Shutterstock

Multistep forms are common. You’ll see them in onboarding, checkout, quizzes and setup wizards. Each step collects a small part of the full information. Yet implementing them cleanly in React remains a challenge. We developers frequently encounter issues such as:

State sprawl — managing step state and form data separately.
Unnecessary rerenders — a change in one step can trigger renders in unrelated components.
Rigid architecture — Adding validation or dynamic logic often requires major rewrites.

Libraries like Context API, Redux or Zustand are popular choices. But they come with trade-offs like extra setup or unnecessary re-renders. These can get in the way when you just need simple, local state management.

This tutorial provides a simple, practical way to handle multistep forms. No heavy libraries, just React hooks. This custom solution stays clean and efficient.

It keeps logic local, prevents extra re-renders and stays flexible for real-world forms. It’s lightweight yet powerful.

Which State Managers to Avoid for Multistep Forms?

State libraries are great for global state but don’t fit well for form flows. Their global nature adds unnecessary complexity, which can also hurt performance, especially in multistep forms. They can cause extra re-renders across components, slowing things down. Plus, the added boilerplate makes managing simple multistep forms unnecessarily complex.

To address these challenges, a more customized state management solution is necessary. By isolating the state per step, we avoid unnecessary updates across the form. This keeps the form fast, responsive and simple to manage, even in larger applications.

Image showing the advantages of custom state management over the context API.

Step 0: Prerequisite

To get started, you must have:

NodeJs installed
Basic JavaScript knowledge
React knowledge

Step 1: Creating the React Project

You must have a React project ready.

If you don’t have a project running, you can create a new TypeScript React project using Vite. It’s recommended for fast build times. Run this command to get started:

npm create vite@latest multistep-form -- --template react-ts
cd multistep-form
npm install

npm create vite@latest multistep-form -- --template react-ts

cd multistep-form

npm install

Start the development server to confirm everything works by running the command below:

npm run dev

Before creating new files, let’s look at the file structure that we are going to create.

Image showing the file structure of the React project with a multistep form setup.

Step 2: Setting Up the Store

Create a new folder in src, name it service and add a new file under it named customStore.ts.

type Subscriber&lt;T&gt; = (state: T) =&gt; void;
export type Selector&lt;T, U&gt; = (state: T) =&gt; U;

export interface Store&lt;T&gt; {
  getState: () =&gt; T;
  subscribers: Set&lt;Subscriber&lt;T&gt;&gt;;
  updateState: (updater: (prevState: T) =&gt; T) =&gt; void;
  subscribe: &lt;U&gt;(
    selector: Selector&lt;T, U&gt;,
    callback: (selectedState: U) =&gt; void
  ) =&gt; () =&gt; void;
}

export function createStore&lt;T&gt;(initialState: T): Store&lt;T&gt; {
  let state: T = initialState;
  const subscribers = new Set&lt;Subscriber&lt;T&gt;&gt;();

  const getState = () =&gt; state;

  const updateState = (updater: (prevState: T) =&gt; T) =&gt; {
    state = updater(state);
    subscribers.forEach((subscriber) =&gt; subscriber(state));
  };

  const subscribe = &lt;U&gt;(
    selector: Selector&lt;T, U&gt;,
    callback: (selectedState: U) =&gt; void
  ) =&gt; {
    let currentSelectedState = selector(state);

    const subscriber = (newState: T) =&gt; {
      const newSelectedState = selector(newState);
      if (newSelectedState !== currentSelectedState) {
        currentSelectedState = newSelectedState;
        callback(newSelectedState);
      }
    };

    subscribers.add(subscriber);
    return () =&gt; subscribers.delete(subscriber);
  };

  return { getState, subscribers, updateState, subscribe };
}

type Subscriber<T> = (state: T) => void;

export type Selector<T, U> = (state: T) => U;

export interface Store<T> {

getState: () => T;

subscribers: Set<Subscriber<T>>;

updateState: (updater: (prevState: T) => T) => void;

subscribe: <U>(

selector: Selector<T, U>,

callback: (selectedState: U) => void

) => () => void;

}

export function createStore<T>(initialState: T): Store<T> {

let state: T = initialState;

const subscribers = new Set<Subscriber<T>>();

const getState = () => state;

const updateState = (updater: (prevState: T) => T) => {

state = updater(state);

subscribers.forEach((subscriber) => subscriber(state));

};

const subscribe = <U>(

selector: Selector<T, U>,

callback: (selectedState: U) => void

) => {

let currentSelectedState = selector(state);

const subscriber = (newState: T) => {

const newSelectedState = selector(newState);

if (newSelectedState !== currentSelectedState) {

currentSelectedState = newSelectedState;

callback(newSelectedState);

}

};

subscribers.add(subscriber);

return () => subscribers.delete(subscriber);

};

return { getState, subscribers, updateState, subscribe };

}

This code creates a lightweight state management system to handle global state without using context or third-party libraries. Defining a store that holds the state lets us update it through an updater function and gives access to the current value.

Adding a subscription system with selectors allows components to listen only to the specific slice of state they need. This helps avoid unnecessary re-renders and keeps components efficient. It also makes state management more modular and scalable. Whenever that selected state changes, the corresponding callback is triggered.

The result is a clean, minimal setup that works seamlessly in React environments.

Next, create a new folder in src, calling it hooks for adding useStore.ts in it.

import { useState, useEffect } from "react";
import { Selector, Store } from "../services/customStore";

function useStore&lt;T, U&gt;(store: Store&lt;T&gt;, selector: Selector&lt;T, U&gt;): U {
  const [selectedState, setSelectedState] = useState(() =&gt;
    selector(store.getState())
  );

  useEffect(() =&gt; {
    return store.subscribe(selector, setSelectedState);
  }, [store, selector]);

  return selectedState;
}
export { useStore };