useFormik()

useFormik() is a custom React hook that will return all Formik state and helpers directly. Despite its name, it is not meant for the majority of use cases. Internally, Formik uses useFormik to create the <Formik> component (which renders a React Context Provider). If you are trying to access Formik state via context, use useFormikContext. Only use this hook if you are NOT using <Formik> or withFormik.

** Be aware that <Field>, <FastField>, <ErrorMessage>, connect(), and <FieldArray> will NOT work with useFormik() as they all require React Context.

Use cases for `useFormik()`

You are Jared
You are modifying the returned value and creating a modified version of <Formik> for your own consumption
You want to avoid using React Context (possibly for perf reasons)

Example

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 const SignupForm = () => {
5   const formik = useFormik({
6     initialValues: {
7       firstName: '',
8       lastName: '',
9       email: '',
10     },
11     onSubmit: values => {
12       alert(JSON.stringify(values, null, 2));
13     },
14   });
15   return (
16     <form onSubmit={formik.handleSubmit}>
17       <label htmlFor="firstName">First Name</label>
18       <input
19         id="firstName"
20         name="firstName"
21         type="text"
22         onChange={formik.handleChange}
23         value={formik.values.firstName}
24       />
25       <label htmlFor="lastName">Last Name</label>
26       <input
27         id="lastName"
28         name="lastName"
29         type="text"
30         onChange={formik.handleChange}
31         value={formik.values.lastName}
32       />
33       <label htmlFor="email">Email Address</label>
34       <input
35         id="email"
36         name="email"
37         type="email"
38         onChange={formik.handleChange}
39         value={formik.values.email}
40       />
41       <button type="submit">Submit</button>
42     </form>
43   );
44 };

Reference

`useFormik<Values>(config: FormikConfig<Values>): FormikProps<Values>`

A custom React Hook that returns Formik states and helpers. It is used internally to create the <Formik> component, but is exported for advanced use cases or for those people that do not want to use React Context.

PrevioususeField()NextuseFormikContext()

Was this page helpful?