Form Reset On Success

[AlexanderKaran]

Once the submission is successful, I have a form that stays on the same page once the action is complete (account page in settings).

I need the form to reset (i.e. isDirty) to go back to false.

Is there a way to do this without using a useEffect? Totally happy to contribute to the docs

[chiptus]

  const [formKey, clearForm] = useReducer((state) => state + 1, 0);

  <FormComponent key={formKey} onSuccess={() => clearForm()} />

[Roanmh]

I recently had an issue where calling reset() inside a useEffect() (As react-hook-form recommends) would cause a render loop. (Note that I was also following the react linter's requirement to include reset() in the dependency array). Upgrading to remix-hook-form 4.3.1 resolved this, per this commit.

If this problem is the motivation for your question, you may be able to return to the suggested usage with an upgrade.

[AlemTuzlak]

@Roanmh Yes, I discovered that some methods were unstable in between renders and caused the issue but they were fixed. I would recommend just using the intended approach from the react-hook-form docs or what Chiptus wrote in his comment