Skip to content

Reset state after a successfull form submission #14

Open
@balazsorban44

Description

@balazsorban44

Is your feature request related to a problem? Please describe.
When a user fills out a form and submits it, it is often desired that all the input fields are cleared, and the values are set back to initial/default values

Describe the solution you'd like
Such a functionality can be baked into onSubmit:

1. Provide a simple reset() function parameter, that takes no arguments, and reuses the useForm#initialState value.

const form = useForm({
  //...
  // Whatever is set here is the new value of `form.fields`, after `reset()` is called
  // If `initialState` is set async (meaning it's value changed over time), the last value will be used.
  initialState: {
    email: ""
  },
  async onSubmit({fields, reset}) {
    try {
      //... submit your form here
      reset() // when the form was submitted successfully, you can call reset() to clear all the input fields
    } catch(e) {
       // if the submission failed, handle the error here
    } 
  }
})

2. Alternatively, you could take an object as an argument, for partial resetting:

This way, the user can selectively reset certain fields, but it also introduces more complexity, while in most cases, a simple reset would be enough.

const initialState = {
  email: "",
  name: ""
}
const form = useForm({
  //...
  initialState,
  async onSubmit({fields, handleChange}) {
   try {
      //... submit your form here
      handleChange({ // when the form was submitted successfully, you can call handleChange to change any fields you would like.
        ...initialState,
        email: fields.email // Prevents the e-mail field to be cleared
      })
    } catch(e) {
       // if the submission failed, handle the error here
    }
  }
})

3. useForm() could return a state property, that is set to one of these values:

type FormState = "validationErrors" | "submitPending" | "submitError" | "submitSuccess"

This could replace/accompany useForm()#loading, as a good practice:
https://kentcdodds.com/blog/stop-using-isloading-booleans

This keeps the useForm() API clean and lower level, while also solving other potential issues by being able to track the precise state of the form at all times.

For example, useForm comes with a built-in notification handling, which may add unnecessary complexity to the API. With a simple state property, the user could simply handle notifications themselves.

Describe alternatives you've considered
A workaround with today's API could look like this:

// Option 3. could simplify this, by not having to set the `submitted` state manually.
const initialState = {
  email: "",
} // This must either be defined outside of the component or be wrapped in `React.useMemo` to be reuseable in the `useEffect code below`
const [submitted, setSubmitted] = React.useState(false)
const form = useForm({
  //...
  initialState,
  async onSubmit({fields, handleChange}) {
   try {
      //... submit your form here
      setSubmitted(true) // when the form was submitted successfully, set a submitted state
    } catch(e) {
       // if the submission failed, handle the error here
    }
  }
})
React.useEffect(() => {
  if(submitted) {
    handleChange(initialState)
    setSubmitted(false)
  }
}, [submitted, handleChange, initialState]) // You would only need to add initialState, if it was defined inside the component

UPDATE:
After an internal discussion, I landed on option 3, as it has a real potential to simplify the API by getting rid of notification handling.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions