Have you implemented multi-step forms in Wizard Flow? How did you avoid prop drilling when collecting data from different steps and where was the intermediate state stored before sending to the server?

To avoid prop drilling when implementing multi-step forms (Wizard Flow), a centralized state storage accessible to all steps is usually used.

Main approaches:

1. React Context

   • A context is created that stores the shared form state and update functions.
   • All steps access data via useContext, without needing to pass props through each level.

2. State managers (Redux, MobX, etc.)

   • Storing intermediate data in global state.
   • Allows easy management and updating of data from any step.

3. Local state in the parent Wizard component

   • The parent Wizard component contains all form state.
   • Steps receive data and callbacks via props, but since the structure is usually flat, prop drilling is minimal.

Intermediate state is typically stored in client memory until submission to the server, allowing users to navigate between steps, modify data, and only send it at the end with a single request.

Example with React Context:

const FormContext = React.createContext();

function Wizard() {
  const [formData, setFormData] = React.useState({});

  const updateData = (stepData) => {
    setFormData(prev => ({ ...prev, ...stepData }));
  };

  return (
    <FormContext.Provider value={{ formData, updateData }}>
      {/* Form steps */}
    </FormContext.Provider>
  );
}

function Step1() {
  const { formData, updateData } = React.useContext(FormContext);
  // Working with formData and updateData
}

This approach simplifies state management and makes the code cleaner.