Multi-step form

What are you most proud of, and what would you do differently next time?

I am most proud of being able to build this using a new form library I haven't used before, Formik. In the past, I've used React Hook Form but I wanted to try something new.

Next time, I would add type safety to the application by using TypeScript.

What challenges did you encounter, and how did you overcome them?

I ran into a bug where the form values setState wasn't working as expected. When a form was submitted it would first call updateFormValues() then updateFormStep(). Here was my original code:

const { formValues, setFormValues } = useContext(FormContext)
const updateFormValues = (newValues) => {
    setFormValues({ ...formValues, ...newValues })
}

const updateFormStep = (newStep) => {
  setFormValues({ ...prevState, step: newStep })
}

It turns out that updateFormStep()'s setFormValues() was not getting the most up-to-date formValues because React has a tendency of batching state updates togther. As a result, I modified the updateFormStep() function as follows:

const updateFormStep = (newStep) => {
  setFormValues((prevState) => ({ ...prevState, step: newStep }))
}

Now the setFormValues() will always provide us with the latest state (prevState) and we use that in updating our state. Meaning, our state management is more robust and predictable.

In essence, I overcame the issue by adding console logs and Googling how react state updates work.

What specific areas of your project would you like help with?

Open to any feedback!