Formik is a popular open-source library for building forms in React, designed to streamline the notoriously complex aspects of form state management, validation, and submission. It significantly reduces boilerplate by providing a unified API through React Hooks (like `useFormik`, `useField`), Higher-Order Components (`withFormik`), and Render Props (`<Formik>`). The current stable version, 2.4.9, receives regular patch releases focusing on bug fixes, performance improvements, and compatibility with the evolving React ecosystem, including recent updates for React 19. Formik's core philosophy prioritizes performance by minimizing re-renders and offers flexible validation options, often integrating seamlessly with schema-based validation libraries like Yup. Its key differentiators include its comprehensive yet minimal API, support for multiple composition patterns, and a strong emphasis on developer experience, often chosen over alternatives for its focus on local form state rather than global state management.
npm install formikVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates a basic sign-up form using the `useFormik` hook, `Field`, `ErrorMessage`, and `Form` components, integrated with Yup for schema-based validation. It shows how to initialize values, define validation rules, handle changes, blurs, and form submission, including an asynchronous submission example. To run this, install `formik` and `yup`.
Review the official Formik v1 to v2 migration guide on formik.org to update API calls and component usage. Replace `render` props with child callback functions (e.g., `<Formik>{(formikProps) => ...}</Formik>`). Update `resetForm` to accept a partial next initial state object instead of just initial values.Set the `enableReinitialize` prop to `true` on the `<Formik>` component or in the `useFormik` hook configuration to instruct Formik to reinitialize the form when `initialValues` change (based on deep equality). For versions prior to 2.4.6, also ensure `initialValues` are not being mutated directly, as a patch in 2.4.6 introduced deep cloning to prevent this.
Upgrade Formik to version 2.4.8 or newer to ensure full compatibility with React 19. If upgrading is not immediately possible, consider custom type augmentations if working with TypeScript, though upgrading is the recommended solution.
Replace the `render` prop with a child callback function. For example, instead of `<Formik render={props => <MyForm {...props} />} />`, use `<Formik>{(formikProps) => <MyForm {...formikProps} />}</Formik>`.Ensure that `initialValues` are always an object, even if empty, and are consistently available when Formik initializes. For example: `<Formik initialValues={{ email: '', password: '' }} ...>` or `useFormik({ initialValues: { email: '', password: '' }, ... });`Add the `enableReinitialize` prop to your `<Formik>` component or `useFormik` hook configuration: `<Formik enableReinitialize={true} ...>`. This tells Formik to reinitialize the form's state whenever `initialValues` (or `validationSchema` or `initialStatus`) deeply change.Use ES Module `import` syntax: `import { Formik, Field, useFormik } from 'formik';`. Ensure your project's build setup (e.g., Babel, Webpack, TypeScript) is configured to handle ESM correctly.Verify that every `<Field>` and `<ErrorMessage>` has a `name` prop that exactly matches a key in your `initialValues` object (e.g., `name='email'` corresponds to `{ email: '' }` in `initialValues`). Ensure all nested fields are correctly represented in the `initialValues` structure.Ensure all form fields have an associated `<ErrorMessage name="fieldName" />` to display specific validation feedback. For a general error message, you can conditionally render a message based on the `formik.errors` object, for example: `{!formik.isValid && formik.submitCount > 0 && <div style={{color: 'red'}}>Please fix the errors above.</div>}`.