Reset form does not work as expected in combination with useStore #1798

Activity

1. Vijayabaskar56 commented on Oct 10, 2025

   

   Vijayabaskar56

   on Oct 10, 2025

   Contributor

   More actions

   Can You try form.reset(data, { keepDefaultValues: true })

   { keepDefaultValues: true }. this will set the data as new Default Value
2. marc-niclas commented on Oct 11, 2025

   

   marc-niclas

   on Oct 11, 2025

   Author

   More actions

   { keepDefaultValues: true }. this will set the data as new Default Value

   I think you meant, this will keep the existing default values.

   Regardless, yes, that fixed the problem. I'm not quite sure why modifying the default values or not should influence the end result. It seems to me even if I do replace the default values with the new values, the end state should reflect the values I passed into reset, i.e. x === '5'.
3. Vijayabaskar56 commented on Oct 12, 2025

   

   Vijayabaskar56

   on Oct 12, 2025

   Contributor

   More actions

   Yeah, Not Sure about that behavior, @LeCarbonator might give us some info on this ?
4. LeCarbonator commented on Oct 12, 2025

   

   LeCarbonator

   on Oct 12, 2025

   Contributor

   More actions

   I believe the main problem is this:

   • form.reset(values) resets to a new set of values
   • after the reset occurred, a new render cycle with an update value starts.
   • the form options are reevaluated, and it notices that the incoming defaultValues are not the same as the currently saved defaultValues.
   • this would usually be ignored because the form is touched, but the reset form now accepts defaultValues again. This is intended to be for async initial values, but it undoes your form.reset-provided values
5. marc-niclas commented on Oct 13, 2025

   

   marc-niclas

   on Oct 13, 2025

   Last edited by marc-niclas

   Author

   More actions

   @LeCarbonator ok so... it's a bug? sounds like a bug.

   This is a problem because setting values from an existing record in the db is a common pattern in my app. Because .reset has unexpected behaviors, I'm using this as a workaround but its not ideal because I have an unneeded copy of the form in state:

   const [formFromDb, setFormFromDb] = useState<Form>();
   
   const form = useForm({ defaultValues: formFromDb ?? defaultValues });
   
   useEffect(() => {
     if (!dataFromDb) return;
     const newForm = toForm(dataFromDb);
     form.reset(newForm);
     setFormFromDb(newForm);
   }, [dataFromDb])

   👍React with 👍1Reacted by armanTakmazyan
6. LeCarbonator commented on Oct 13, 2025

   

   LeCarbonator

   on Oct 13, 2025

   Contributor

   More actions

   Yeah, it's a bug, but it's one that is really difficult to work around. It needs some time to be properly looked at

   👍React with 👍6Reacted by Marc Hermann, vjfb, Florian Bienefelt, enoriega-ts, armanTakmazyan and Maxime

   😕React with 😕1Reacted by Imam Alfarizi
7. mamlzy commented on Oct 30, 2025

   

   mamlzy

   on Oct 30, 2025

   More actions

   This bug is a blocker for me to use this library. I hope the contributors fix it as soon as possible. 🙏

   👍React with 👍3Reacted by armanTakmazyan, Maxime and Ludwig Högström
8. smaindarkar commented on Dec 30, 2025

   

   smaindarkar

   on Dec 30, 2025

   Last edited by smaindarkar

   More actions

   I think there is no need to manually reset the form values with useEffect, we can directly set the default values,

   @marc-at-brightnight @LeCarbonator @mamlzy

   const [serverData, setServerData] = useState<{ x: string; date: Date }>();
   
   const form = useForm({
       defaultValues: {
         x: serverData?.x ?? '1',
         date: serverData?.date ?? new Date(),
       },
     });
     const [x, date] = useStore(form.store, (state) => [
       state.values.x,
       state.values.date,
     ]);
     // const { x, date } = { x: form.state.values.x, date: form.state.values.date };
   
     useEffect(() => {
       setTimeout(() => {
         setServerData({ x: '5', date: new Date(2025, 0, 1) });
       }, 500);
     }, []);
   
     // useEffect(() => {
     //   if (!serverData) return;
   
     //   setTimeout(() => form.reset(serverData));
     //   console.log('reset form');
     // }, [serverData]);
   

   👎React with 👎1Reacted by mpa
9. marc-niclas commented on Dec 30, 2025

   

   marc-niclas

   on Dec 30, 2025

   Last edited by marc-niclas

   Author

   More actions

   I think there is no need to manually reset the form values with useEffect, we can directly set the default values,

   This is true, although syntactically defaultValues: serverData ?? { x: '1', date: new Date() }, makes more sense to me. Regardless, for this simple example, you are correct.

   However, lets go to a more practical example, where you have multiple different queries and a need to transform those queries into your form data:

   const [valuesLoaded, setValuesLoaded] = useState(false);
   
   const query1 = useComponent1Query(id1);
   const query2 = useComponent2Query(id2);
   
   const form = useForm({ defaultValues: initialStaticValues });
   
   useEffect(() => {
     if (query1.data && query2.data) {
       form.reset(transformData(query1.data, query2.data));
       setValuesLoaded(true);
     }
   }, [query1.data, query2.data]);

   However, I've found this type of logic does not work reliably in tanstack.

   Yes, you could shift the transform logic to inside the useForm:

   const form = useForm({ defaultValues: query1.data && query2.data ? transformData(query1.data, query2.data) : initialStaticValues });

   But then what about your custom loading state? You could depend on the loading state of the individual queries, but what if transformData takes a non-trivial amount of time to transform the data? (Yes, at some point, it makes sense to consider shifting this logic to the server but that's a whole separate rabbit hole that's out of scope for this discussion).

   In a nutshell, to me, it seems like

   const form = useForm({ defaultValues: initialStaticValues });
   form.reset(newValues);

   does not work reliably in all situations and that is causing bugs for me (and presumably others).

   👍React with 👍3Reacted by mpa, armanTakmazyan and Maxime
10. smaindarkar commented on Dec 31, 2025

    

    smaindarkar

    on Dec 31, 2025

    Last edited by smaindarkar

    More actions

    I think there is no need to manually reset the form values with useEffect, we can directly set the default values,

    This is true, although syntactically defaultValues: serverData ?? { x: '1', date: new Date() }, makes more sense to me. Regardless, for this simple example, you are correct.

    However, lets go to a more practical example, where you have multiple different queries and a need to transform those queries into your form data:

    const [valuesLoaded, setValuesLoaded] = useState(false);

    const query1 = useComponent1Query(id1);
    const query2 = useComponent2Query(id2);

    const form = useForm({ defaultValues: initialStaticValues });

    useEffect(() => {
    if (query1.data && query2.data) {
    form.reset(transformData(query1.data, query2.data));
    setValuesLoaded(true);
    }
    }, [query1.data, query2.data]);
    However, I've found this type of logic does not work reliably in tanstack.

    Yes, you could shift the transform logic to inside the useForm:

    const form = useForm({ defaultValues: query1.data && query2.data ? transformData(query1.data, query2.data) : initialStaticValues });
    But then what about your custom loading state? You could depend on the loading state of the individual queries, but what if transformData takes a non-trivial amount of time to transform the data? (Yes, at some point, it makes sense to consider shifting this logic to the server but that's a whole separate rabbit hole that's out of scope for this discussion).

    In a nutshell, to me, it seems like

    const form = useForm({ defaultValues: initialStaticValues });
    form.reset(newValues);
    does not work reliably in all situations and that is causing bugs for me (and presumably others).

    Also, form.reset is not working only when we are observing any form property with useStore hook. And async initial values option is as per Tanstack Form documentation, https://tanstack.com/form/latest/docs/framework/react/guides/async-initial-values

    @marc-at-brightnight

    👍React with 👍1Reacted by Marc Hermann
11. Vito-Ethan commented on Feb 10, 2026

    

    Vito-Ethan

    on Feb 10, 2026

    More actions

    Facing the same issue. Reading through #1681 there's this comment about setting a timeout with the reset which works for me. #1681 (comment)

    setTimeout(() => form.reset({ ...defaultUser, email }))

    form.reset(newValues) was working fine until I refactored using form composition. I didn't change anything about the form's logic other than extracting it into reusable form and field components
12. jens-kuerten commented on Feb 22, 2026

    

    jens-kuerten

    on Feb 22, 2026

    Last edited by jens-kuerten

    More actions

    I ran into the same problem.
    Passing the option { keepDefaultValues: true } fixes the issue for some weird reason.

    form.reset(newValues, { keepDefaultValues: true })

    👍React with 👍2Reacted by BaYeN and Reginald Johnson
13. ikea-niklas commented on Mar 18, 2026

    

    ikea-niklas

    on Mar 18, 2026

    Last edited by ikea-niklas

    More actions

    I just ran into the exact same problem.

    @jens-kuerten workaround only fixes whats visible. If one adds another form.reset() below that line it resets it all back to what it was before. IE

    form.reset(newValues, { keepDefaultValues: true })
    form.reset()

    But I did find a workaround that so far seems to fix it for me. I save my defaultValues in a state, and pass that to useFormState, and then in onSubmit I call setDefaultValues followed by reset.

    const [defaultValues, setDefaultValues] = useState<FormValues>(initialDefaultValues)
    
    const form = useAppForm({
        defaultValues,
        ...
        onSubmit: async ({ value, formApi }) => {
            ...
            setDefaultValues(value)
            form.reset(undefined, { keepDefaultValues: true })
        }
    }

    👍React with 👍1Reacted by mpa
14. LeCarbonator

    added

    v1This issue has been created during v1 development.This issue has been created during v1 development.

    v2: needs investigationThis hasn't been confirmed or denied in v2 yet.This hasn't been confirmed or denied in v2 yet.

    on Aug 9, 2026
15. Satjeet2005 commented on Oct 16, 2026

    

    Satjeet2005

    on Oct 16, 2026 – with ChatGPT Codex Connector

    More actions

    Hi maintainers! We investigated #1798 and the related reset/re-render behavior in #1681. We noticed the existing proposals in #2218 and #2235 and wanted to coordinate before opening another PR.

    Our local patch tracks the last defaultValues supplied through options (_lastOptionsDefaultValues) so values set by form.reset(newValues) survive repeated renders that pass unchanged stale options, while genuinely new async/prop-driven defaults can still be accepted. It also continues normal defaultState reconciliation rather than returning early from update().

    We have regression coverage for the useStore reproduction, multiple subsequent renders, parameterless reset(), and genuinely new defaults; the form-core and react-form test suites and targeted checks pass locally.

    Would you prefer that we open a separate PR for maintainer review, or would it be better to coordinate/consolidate with #2218 or #2235? We're happy to follow your preferred route.