Allow resetting only actually updated initial values

[DnEgorWeb]

🚀 Feature request

Allow reinitializing only updated initial values, do not reset the whole form

Current Behavior

Right now enableReinitialize feature reinitialises all the fields to initial values. If we have 2 fields and one of them already has a value, and then another field gets a new initial value, both fields will be reset and 1st field will have initial value again.

Desired Behavior

When components receive new initial value for one of the fields - reset only this field and do not reset all of the other fields.

1. Initial state

<Formik
  enableReinitialize
  initialValues={{
    first: props.first, // this field is dynamic and depends on props
    second: '',
  }}
  ...
>
  ...
</Formik>

2. Then components change the second field by itself and now it contains my text (for example). So second has a value of my text now, first is still an empty string.
3. Then the component receives new props.first and the form is reset. While first gets a new initial value, I want second to preserve its changed value my text, and not to be empty again.

Suggested Solution

Either make enableReinitialize prop to reset only changed fields or add another prop like enableSingleFieldReinitialize which will stand for a flag for enableReinitialize inside useEffect.

Who does this impact? Who is this for?

For all users who need dynamic initial values while modifying the form fields.

Describe alternatives you've considered

enableReinitialize can also accept an object with fields we want to be reinitialised when initial value changes.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

[ming1in]

any updates on this?

[innakostiuk]

having same issue

[Marius-Adam]

Any updates on this? Would be really helpful

[douglasrcjames]

Bumping this. Trying to accomplish the same thing, but can't find a solution!

[barjabeen12]

Any update? facing same issue.

[httol]

How is it going?

[marcohaferkamp]

I also would appreciate a feature like this. Here's a workaround using the useFormik hook:

import { useFormik } from 'formik';

const { setFieldValue } = useFormik({
    initialValues: {
        someField: ''
    },
    onSubmit: () => { console.log('do your submit) },
});

useEffect(() => {
    setFieldValue('someField', someValue);
}, [someValue]);

In my case someValue comes from the global state. This way you can update single fields without reinitialize the whole form.

[johnrom]

An effect is the only way to accomplish this in Formik currently

[farrukh28]

Still facing this issue. Any solutions?

[DnEgorWeb]

At that point (2 years ago) I ended up having my own implementation of form management. Formik does a great job, but it's overloaded with inner logic damaging performance and still not flexible enough in cases like this. I'll keep it open, but it does not look like the feature will be added any time soon.

[farrukh28]

@DnEgorWeb Agreed. Plus I'm using formik with [email protected] and I think I can't use useFormik hook because formik-mui uses it's own components (Field).

[Fals3Android]

+1 on this feature request, enableReinitialize needs to be configurable so we can opt in to either resetting the whole form or only parts of the form.

[nick-0101]

+1

[Abhishekkumar4444]

I am facing the same issue. kindly suggest me ,how partially reinitialize the initial value.