Как организовать хранение промежуточного состояния многошаговой формы на фронтенде?

Основные подходы к хранению состояния многошаговой формы

При разработке многошаговых форм на фронтенде важно сохранять данные между шагами, чтобы пользователь мог вернуться назад или продолжить позже. Существует несколько способов организации такого хранения, каждый из которых подходит для разных сценариев.

Локальный state компонента

Самый простой способ — хранить все данные формы в одном объекте внутри компонента, который управляет шагами. Это удобно для небольших форм с 2-3 шагами.

import React, { useState } from 'react';

function MultiStepForm() {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    address: ''
  });

  const updateField = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  // Рендер шагов в зависимости от step
}

useReducer для сложной логики

Если форма имеет много полей и сложные правила валидации, лучше использовать useReducer. Это позволяет централизованно обрабатывать изменения и упрощает тестирование.

const initialState = { name: '', email: '', address: '' };

function formReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    case 'RESET':
      return initialState;
    default:
      return state;
  }
}

function MultiStepForm() {
  const [formData, dispatch] = useReducer(formReducer, initialState);
}

Context API для глобального доступа

Когда форма разбита на отдельные компоненты для каждого шага, удобно использовать Context API, чтобы избежать prop drilling. Создаётся контекст, который предоставляет данные формы и функции для их обновления всем дочерним компонентам.

const FormContext = React.createContext();

function FormProvider({ children }) {
  const [formData, setFormData] = useState({});
  return (
    <FormContext.Provider value={{ formData, setFormData }}>
      {children}
    </FormContext.Provider>
  );
}

Вывод

Выбор метода зависит от сложности формы и архитектуры приложения. Для простых форм достаточно локального state, для средних — useReducer, а для крупных проектов с множеством шагов и компонентов — Context API или Redux. Это обеспечивает удобство разработки и поддержки кода.