Formik is re-rendering every-time I click on the page, why?

[kewitz]

For some weird reason, every time I click on the page that has Formik rendered, it will cause Formik to re-render.
Any clues why this is happening? I tried to set "validateOnBlur = false" but that did not work.

[johnrom]

I can't get a good view of your hierarchy from this gif because it scrolls so quickly through the graph, but this problem is usually indicative of an element creating a new element on each render that cannot be determined by React to be the same (same key, etc). Usually this happens if you do something like:

const getForm = () => <Formik />;

const MyPage = () => {
  const MyForm = getForm();

  return <div>{ MyForm }</div>;
}

It also happens frequently when using array.map and other iterative scenarios; those are generally indicated by a console warning like "Warning: Each component in an array must have a unique key".

[kewitz]

I don't think that's the case.
The React dev-tools explicitly show that Formik was triggering the render because "Hooks changed".

[johnrom]

It's pretty hard to tell why hooks would have changed without being able to see the code. Does any of your code or the third party components you are using include click, focus or blur event listeners which could cause this?

If you look at the base Formik example, I don't see this rendering issue in formik@2.2.1.

https://codesandbox.io/s/formik-v2-tutorial-final-forked-5xwb8

[kewitz]

I'll try updating Formik and if that doesn't work I'll debug this further, thanks @johnrom!