Batch async state updates

[maxdavidson]

Async validations trigger act warnings during testing:

an update to Formik inside a test was not wrapped in act

When validating, the next error state is updated at the earliest at the end of the current tick. These will cause act warnings unless they take place during the window of an async act call. It's hard to know the timing of these, so it should be Formik's responsiblity to prevent these warnings.

What act does is basically forcing updates to be batched. React automatically batches updates in event handlers and component lifecycles/effects, but for other updates we need to use unstable_batchedUpdates. Unfortunately it's not exported by React itself so we need to use some requires with fallbacks to support different renderers.

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/jared/formik-docs/3dgqckx05
✅ Preview: https://formik-docs-git-fork-maxdavidson-batched-updates.jared.now.sh

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 200cdee:

Sandbox	Source
Formik TypeScript Playground	Configuration

[wachunga]

These warnings are causing a lot of clutter in our test output. Looks like this issue is related: #1543

[dreyks]

any updates on this?

[ghost]

any updates?

[maxdavidson]

I don't think the require in a try-catch will be portable enough, since it won't work in ES module-only contexts. Dynamic imports could work, but that would make it async.

React-redux does it like this to support React Native:

https://github.com/reduxjs/react-redux/blob/v7.2.3/src/utils/reactBatchedUpdates.js

export { unstable_batchedUpdates } from 'react-dom';

https://github.com/reduxjs/react-redux/blob/v7.2.3/src/utils/reactBatchedUpdates.native.js

export { unstable_batchedUpdates } from 'react-native';

The file structure would need to be preserved for this trick to work though, or you would have to output a separate bundle for RN.

Alternatively, using some sort of dependency injection based on the entry point could also do it (formik-dom/formik-native?)