Build forms in React, without the tears 😭

Current Behavior

If there is an "external" component controlling initialValues passed to Formik, Formik never updates it. This may be desired behavior, however in my specific case I need to re-render the form (and ideally, warn the user about unsaved changes) with new initialValues. If this is not a bug, any ideas on how to achieve this?

Steps to Reproduce

1. Open https://codesandbox.io/s/kworjlq7n3
2. Toggle between the select options
3. You will see that all components in the chain re-render with new values, however Formik render never changes initialValues.

Expected behavior

When initialValues change, Formik should trigger a re-render and provide new initialValues in its render method.

CodeSandbox Link: https://codesandbox.io/s/kworjlq7n3

EDIT: CodeSandbox demonstrates a working solution

• Formik Version: 1.0.2
• React Version: 16.3.2
• TypeScript Version: N/A
• Browser and Version: Chrome Version 68.0.3440.84 (Official Build) (64-bit)
• OS: Mac OS 10.13.4

Improvements

• [x] Create <Field as> prop (#1406)
• [x] Add meta prop to <Field children> (#1406)
• [x] Break out useFormik from <Formik>
• [x] onReset and handleReset tests
• [x] async onSubmit (no more setSubmitting(false) needed)
• [x] Make validation cancellable (#1026, #671)
• [x] useField's second element is field metadata (#343)
• [x] Add initialErrors, initialTouched, initialStatus (#1410)
• [x] Fix isValid (#1410)
• [ ] <Field >'s uses handleBlur('path') and handleChange('path') override (#1113)
• [x] Upgrade to TypeScript 3.5 and React 16.9 (#1559)

Breaking Changes

• Breaking TypeScript change: FormikActions have been renamed to FormikHelpers
• Formik no longer uses console.error in its warnings, but rather console.warn

Deprecations

These are just warnings for now.

• [x] <Field render> (#1406)
• [x] <Field component> (#1406)
• [x] isInitialValid and fix isValid (#1410)

Documentation

• [ ] useField
• [ ] "Creating your own <FieldGroup>"
• [ ] Checkboxes and Radio inputs
• [ ] <FormikConsumer>
• [ ] useFormikContext
• [ ] useFormik
• [ ] Rewrite examples with hooks
• [ ] Rewrite tutorial with hooks
• [ ] Migration Guide
• [ ] Blog post

Feel free to start making PR's to this branch. This is going to take a minute to figure out as there are a LOT of new paradigms.

#1046 #1005

Feature

Current Behavior

setFieldValue() is async because it uses setState(), but it doesn't receive a callback or return anything. That's why it's hard to get modified values right after that, for example if I want to run submitForm().

Desired Behavior

setFieldValue() will return a promise, so I could await it and get changed values.

Suggested Solutions

return a Promise from setFieldValue() OR add additional callback to function declaration

• Formik Version: 0.11.11
• React Version: 16.2.0
• CodeSandbox Link: https://codesandbox.io/s/x9445yl5lp

This is my quick suggestion to solve issue #202 . It is far from perfect (I don't use Typescript so I neglected types), also, I couldn't make lodash/fp working with Typescript, so I needed to use mutable _.set, and sadly I used it with deepClone. Of course this would need to be refactored, but this is just a prototype.

If you like this idea, we could work on it more, add missing tests etc.

The good news is, that all tests are passing so it is backward compatible change :)

What if the user has set some field values, and we do store them somewhere, and when the user returns to the app those values are invalid. Is there no way to run validate on initialization?

I tried adding trim() to my formik validation schema:

Yup.object().shape({
    label: Yup.string().trim().required('some error msg'),
});

But the field value is not being trimmed.

Formik is great, but there are one or two parts where the methods could be a little more TypeScript friendly, and in this PR I'm introducing a new method which I hope takes a step in this direction.

For context: I have a form where a user can enter an ID into a field to perform a lookup. Data is fetched over HTTP, and I use data from the response to populate other form fields by using multiple setFieldValue calls. The signature of setFieldValue isn't type-safe – the value is any, and the field may not necessarily exist. (There was some discussion of this in #1388)

This PR introduces a setFieldValues method that takes a Partial<Values> and merges that with the existing form values. I would find this really useful.

Things that I'm not too sure about, and that I'd welcome feedback on:

• Does this method go against the design of Formik, where fields are referenced using the path-style string (eg. people.0.first_name)?
• Is there a better name for this method, than setFieldValues? It's basically like setValues, but it allows subsets and merges rather than overwriting.

I'm just playing with formik library and found performance issue with custom component in Field tag when the custom component uses styled components heavily.

When I keep pressing the key in an input box which is wrapped in multiple hierarchy of styled components, it causes huge lagging but instead of that, if I use simple divs, it is comparatively faster.

• [ ] Hooks (#1063)
• [ ] Use JSX generics on <Field<Values>> (#726 , #370)
• [ ] Add debugger / logger
• [ ] Begin deprecating dirty, with warning (replaced withisDirty) (#353)
• [ ] Add submitAttemptCount, submitFailureCount, submitSuccessCount and computed boolean counters? didSubmitSucceed and didSubmitFail or submitFailure / submitSuccess
• [ ] Add warnings, setFieldWarning, setWarnings (#1001, #389)
• [x] Async onSubmit (#486 , #500)
• [x] Ensure that Formik context value is immutable
• [ ] Promisify or give callbacks to all setFieldXXX functions

I have a large form with 20~30 fields. It seems formik becomes slow when there are large number of fields. It seems to validate every field on every keystroke. Is there a good way to mitigate this issue?

In the wizard example, I expected there to be validation on each step. As in, if you don't complete the form you can't continue to the next piece of the form.

What would be the idiomatic Formik way to do this? Can we add this to the examples?

Also the documentation (readme) doesn't mention Wizard. It would be nice to add.

Feature request

Current Behavior

Currently there is no clean way to check if an input has been modified from it's initial value. Touched does not accomplish this, however touched is specific to each input, which is what I need but for dirty inputs. The current way to accomplish this is

console.log(formik.getFieldMeta("inputName").value === formik.getFieldMeta("inputName").initialValue) // boolean

Desired Behavior

Suggested Solution

My suggestion is to have a way to check if an individual input is dirty, just like you can do with touched. If I have a form that edits an item, I want to color inputs that have been modified from their initial value, but there is no simple way of doing this in formik, but formik is supposed to help make our code less verbose and help us do simple tasks quickly. Ideally formik.isDirty will be just like formik.touched , where it would have all the individual inputs, and you can still use it as a boolean by parsing the empty object, and in that way it would keep the current functionality that isDirty has (checking if ANY of the inputs are dirty) Though changing isDirty to an object might be an issue because all the typescript users will have to go back and parse it as boolean when they update their formik version. There are other ways such as adding a .dirty instead of .isDirty , or having an isDirty property in each field's metadata.

Who does this impact? Who is this for?

This feature impacts anyone who needs to check if an individual input has been dirtied, and this is a common use case especially when you have an form which edits an item that has default initial values already, you would want to help the user by showing him which fields he has modified with different classes or styles.

Describe alternatives you've considered

Currently I am making my own function to check specific input dirt, but I am very opposed to this as formik should have something like this built in, and maybe not even in a function which also looks bad for booleans

	function isInputDirty(name: keyof IInput) {
		let boolean = formik.getFieldMeta(name).value === formik.getFieldMeta(name).initialValue
		return !boolean
	}

Additional context

Feature request

Material UI dialogs are handled differently from regular forms in that they need unusual wrapping with Dialog tags buttons. I've found two much different examples of how it should be done but an official docs technique would be nice to have IMHO...

https://gist.github.com/michieldewilde/d7c5399e445bf8d1965aafe4f3162adb https://tidyelement.com/2022/01/12/building-a-react-modal-with-formik-mui-textfield-and-select/

It's not super obvious which is the best way...

Hi. If a field change then all fields and component use useFormikCotext rerenders. It see to example https://codesandbox.io/s/formik-rerender-test-v8gw7x. It is not really good.

After my change: https://user-images.githubusercontent.com/8194467/183079431-5629cb92-caf2-43d5-90df-94b66968c90a.mov

I wanted do Formik like React.Component and useFormik functions moved to Formik. Example here is https://github.com/DjoSmer/react-form-context-example/blob/master/src/features/profile/components/PersonalNames/FormControl.tsx.

Sorry for my english.

Feature request

Current Behavior

Currently there is not way to detect changes globally on a Form. The only way to detect changes is to add a callback on every input fields within the form.

Desired Behavior

It would be very use full to have an onValuesChange callback function on the Form it self, pretty much like Ant Design does: here

Suggested Solution

When ever a form.handleChange is called, the onValuesChange callback must be called.

Who does this impact? Who is this for?

Would be use full to anyone. I'm trying change the state of the submit button only when some values has changed and it would be much easier with this callback.

Describe alternatives you've considered

None

Additional context

None

Bug report

Calling helpers.setValue results in an infinite loop when it's called inside useEffect in React 18.

React 17: https://codesandbox.io/s/formik-usefield-hook-react-18-bug-forked-ucpg4d?file=/src/App.js

React 18: https://codesandbox.io/s/formik-usefield-hook-react-18-bug-nr052g?file=/src/App.js

The code of the App component is exactly the same on both sandboxes, what changes is the React major version.

Expected behavior

React 17: If you click on the CLICK button in the React 17 sandbox, you will see that the input value will change from [email protected] to [email protected] 🆗 ✅

Current Behavior

React 18: If you click on the CLICK button in the React 18 sandbox, it will cause an infinite loop ⚠️❗

Suggested solution(s)

I don't know exactly what could be the root cause of this issue, but I suspect that it's related to the Automatic Batching feature/breaking change introduced by React 18:

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching

What happens in practice is that the reducer for SET_FIELD_VALUE is never called for some reason, even though it's action gets dispatched within the setFieldValue function. The reducer for SET_ISVALIDATING is executed instead.

On React 17:

• Formik's setFieldValue is called;
• dispatch SET_FIELD_VALUE
• Reducer for SET_FIELD_VALUE is executed
• validateFormWithHightPriority is then executed ✅

On React 18:

• Formik's setFieldValue is called;
• dispatch SET_FIELD_VALUE
• validateFormWithHightPriority is executed ❗
• Reducer for SET_ISVALIDATING is executed
• Reducer for SET_FIELD_VALUE is never executed for some reason ⚠️

The infinite loop is then caused by the useField hook always returning the old value instead of the new value that was set through helpers.setValue(value).

Your environment

| Software | Version(s) | | ---------------- | ---------- | | Formik | 2.2.9 | React | 18.2.0 | TypeScript | - | Browser | Chrome | npm/Yarn | Yarn | Operating System | Mac OS X