Magic of Formik

Formik is a JavaScript library that simplifies the process of building and managing forms in React applications. It offers a set of pre-built functions that relieve developers from the complexity of managing form state, handling user input changes, and form submission. Let's take a closer look at Formik's benefits through a practical example.

Traditionally, when creating a form in React, developers often use the useState hook to manage the state of form input fields and write custom functions to handle input changes and form submissions. Here's an example of a registration form created using this approach:

import React, { useState } from "react";

function RegistrationForm() {
  const [fullName, setFullName] = useState();
  const [email, setEmail] = useState();
  const [password, setPassword] = useState();

  const formData = {
    name: fullName,
    email: email,
    password: password,
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name === "name") {
      setFullName(value);
    } else if (name === "email") {
      setEmail(value);
    } else if (password) {
      setPassword(value);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input name="name" value={fullName} onChange={handleChange} />
        <input name="email" value={email} onChange={handleChange} />
        <input name="password" value={password} onChange={handleChange} />   
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

export default RegistrationForm;

In this traditional approach, developers have to manage state with useState, write custom handleChange functions, and handle form submission with handleSubmit. This can lead to repetitive code and increased complexity.

Now, let's see how Formik simplifies form handling:

import React, from "react";
import {useFormik} from 'formik';

function RegistrationForm() {
  const formik = useFormik({
    initialValues: {
      name: "",
      email: "",
      password: "",
    },
    onSubmit: (values) => {
      console.log(values);
    },
  });

  return (
    <>
      <form onSubmit={formik.onSubmit}>
        <input name="name" value={formik.values.name} onChange={formik.handleChange} />
        <input name="email" value={formik.values.email} onChange={formik.handleChange} />
        <input name="password" value={formik.values.password} onChange={formik.handleChange} />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

export default RegistrationForm;

With Formik, you no longer need multiple useState hooks, custom handleChange functions, or handleSubmit functions. Formik's pre-built functions, such as useFormik, automatically manage form state and simplify form creation and submission.

To get started with Formik in your React project, create a new React app, and then install Formik using the following commands:

npx create-react-app my-app

cd my-app

npm start

Once your React environment is set-up you can go ahead and install formik npm install formik --save

Now you're ready to harness the magic of Formik in your next project, making form management more manageable and readable.