formik: validateOnMount triggers validation with initialValues when re-rendered

🐛 Bug report

Current Behavior

Re-render causes validateOnMount to run again with initialValues, producing incorrect validation results.

Video of re-render triggering validation with initialValues

This may be intended behavior, but I found it pretty unexpected, especially since the name of the prop is validatesOnMount. The docs do mention that it runs when initialValues changes, so it is behaving as documented. It’s a little not-so-obvious though.

Expected behavior

validateOnMount should only run when the component initially mounts.

Reproducible example

https://codesandbox.io/s/formik-example-no1kc

Additional context

Your environment

Software	Version(s)
Formik	2.0.4
React	16.12.0
TypeScript	3.7.2
Browser	Chrome
npm/Yarn	Yarn
Operating System	OS X

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 17
Comments: 16 (1 by maintainers)

Most upvoted comments

@andycarrell considering this is from November, I don’t think it’s going to get fixed soon, so I guess I’ll use your solution. This also works:

  let initialValues = useMemo(() => {
    return {
      name: '',
      size: ''
    }
  }, []);

+21

arianitu on Jan 17, 2020

I’ve been tearing my hair out over this today before finally figuring out what was going on. I also feel it’s quite unintuitive that initialValues is used as a dependency for the initial validation useEffect.

I ended up working around it by not creating the initialValues object inside the render function, but instead creating it one level up and passing it down into my component that is using Formik.

+15

sgronblo on Dec 16, 2019

I have a similar problem, validateOnMount is causing a render loop.

andreoav on Nov 22, 2019

Thank you for your solution @andycarrell , but I don’t really want to do that everywhere, this bug is awful, we may downgrade to 1.x.

@jaredpalmer this seems like a pretty bad bug in 2.x, shouldn’t initialValues just set the values of Formik and then validation should only act on the actual values?

All our forms are affected since we want Save buttons etc to be disabled before a user can interact with them. With this bug, it breaks all our forms because we sometimes pass values of inputs up the chain and cause re-renders.

arianitu on Jan 17, 2020

I am running into this as well. My initialValues are being used instead of the actual Formik field values for validation leading to the form being invalid when it is really valid.

Anyone found a solution?

arianitu on Jan 17, 2020

I am experiencing this issue on 2.2.9.

useMemo works but hope this gets fixed…

andrewphamvk on Jun 24, 2021

Can confirm this is still an issue in the latest version.

My initial values is causing my whole form to validate + re-render on mount, despite validateOnMount being set to false.

Jakemangan on Dec 27, 2021

This only seems to be a problem from version 2.0.4 onwards. Has anyone else found this?

georgefeast on Dec 12, 2019

the problem is this https://github.com/jaredpalmer/formik/blob/48dd0c7be1a4763df8217e79e72ffdef89447aaa/packages/formik/src/Formik.tsx#L358

you need to useMemo your initialValues