Latest alpha - max update depth exceeded

[kelly-tock]

Bug report

When using a custom input on latest alpha I get a max update exceeded. It looks like the useReducer in my example in formik is being run and re-initializing the initial values.

in formik 2 this is not happing.

Current Behavior

type 1 character into the field, app will crash

Expected behavior

Reproducible example

https://github.com/kelly-tock/formik-alpha-repro

Suggested solution(s)

Additional context

Your environment

Software	Version(s)
Formik	"formik": "^3.0.0-next.8",
React	"react": "^17.0.1",
TypeScript	"typescript": "^4.0.3",
Browser	latest chrome
npm/Yarn	1.22.5
Operating System	os x 10.15.7

[kelly-tock]

if you install formik@latest, this example repo will work.

[johnrom]

@kelly-tock reproductions should be codesandboxes. codesandboxes will allow a maintainer to reproduce immediately without needing access to a dev environment

[kelly-tock]

ah, ok, let me do that

[kelly-tock]

https://codesandbox.io/s/formik-codesandbox-template-forked-mc4mv?file=/index.js

toggle formik between latest alpha and latest 2.x to see the difference.

[github-actions]

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

[kelly-tock]

Bump

[github-actions]

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

[kelly-tock]

Bump

[github-actions]

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

[kelly-tock]

Bump

[github-actions]

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

[kelly-tock]

Bump

[github-actions]

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

[kelly-tock]

Bump

[github-actions]

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

[kelly-tock]

Bump

[github-actions]

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

[kelly-tock]

bump

[johnrom]

I don't know how react-number-format works or why you need it specifically, but it seems like the exact functionality it's used for is covered by the format prop in v3.

With functional components, a lot of the default optimizations from class components have been taken away, so in v3 we brought this functionality back by optimizing using a layout effect + useSubscription (see https://www.npmjs.com/package/use-subscription). What this means is that the next update to child components doesn't occur until the render after Formik's internal state updates, and all code which uses the values in Formik must use the subscription in order to see the actual value.

Your react-number-format input is not treating Formik as the single source of truth for its own value, and thus it cannot work with Formik's alpha (it's tracking its own internal value, and then when the next render comes and the new prop is equal to the old value, it triggers another update, then triggers, another update to formik, then the new old previous value triggers another update in an infinite loop).

This is probably a good reason to avoid going ahead with this alpha. I'd have to find a way to work around this issue, but the only workaround I know of is to use unstable_BatchedUpdates outside of an effect which is.. well.. unstable and isn't a perfect integration with alternate renderers. However, I'm pretty sure this is what redux does so it's not without precedent. In theory, every component which consumes Formik's state should use its API as the single source of truth, but in reality that would put an unreasonable burden on developers to make changes to support this.

Concurrent mode + useMutableSource might help since if I understand correctly it should cancel the render before it is committed and the effects run, skipping right to the 2nd render where both sources match.

[johnrom]

cc: @jaredpalmer

I pushed a fix to my PR #3231 to use unstable_batchedUpdates in both React-Dom and React Native to fix this issue:

https://codesandbox.io/s/formik-codesandbox-template-forked-jy3k7?file=/index.js

React Native isn't actually working since I don't know how to configure tsdx to create an alternate index.native.js entrypoint. But if we can create one, it would work.

Note that batched updates won't work in alternate renderers, and alternate renderers need to use the entrypoint ./index.alternate.js similar to the way Redux does. I also exported setBatch to support custom batch fns in alternate renderers.