Update Formik Initial Values When Props Change

When a Formik form mounts, whatever the initial values are set to is what they will be. Even if the initial values are computed from props, those props changing will not affect initialValues after mount.

const ZipForm = ({ currentZip }) => {
  return (
    <Formik
      initialValues={{ zip: currentZip }}
      onSubmit={(values, actions) => {
        // do stuff
      }}
      ...

If we are fetching the user's saved zip code asynchronously from a server while the form is first being rendered, then currentZip will start as an empty value. Once the async request comes back and currentZip is set, we won't see the form update the zip field.

There was a time when you would have to jump through some hoops to make sure the freshest prop value made it into the form. Now, Formik provides a handier mechanism -- the enableReinitialize prop.

const ZipForm = ({ currentZip }) => {
  return (
    <Formik
      initialValues={{ zip: currentZip }
      enableReinitialize
      onSubmit={(values, actions) => {
        // do stuff
      }}
      ...

By setting enableReinitialize to true, we are telling Formik that any prop changes that flow into the initialValues object should cause those values to be reinitialized.

See a live example.