What is Formik? Formik - a free and convenient open source library for React, helps to solve three main problems of creating forms: 1. How to manage state forms. 2. How to validate forms and report errors in a timely manner. 3. How to submit the form. By putting everything in one place, Formik streamlines everything from testing, refactoring your forms. The Formik library was written by Jared Palmer after his frustration with creating React forms in an effort to standardize the input components and the form submission process itself. The idea was to keep things organized and in one place, making testing and refactoring easier. Formik is quite a flexible tool and you can determine the size of your form yourself. And for this, Yup is used. Yup is a JavaScript schema builder for parsing and validation that allows you to define a schema. Also, there is an analogue to Formik - Redux-Form, and although it is a really great tool that many developers use, it also has its drawbacks. One of the disadvantages of Redux Form is related to the use of reducers. In Redux, a reducer is a function that takes the current state and action as arguments and returns a new state as a result. In a React form, the full top-level reducer is called multiple times for each keystroke, and for small applications such a reducer call for each keystroke is not a big problem. However, as the application size increases, there will be a latency that will continue to increase. Of course, Formik has certain disadvantages. One major drawback is that Formik can only be used in React. If you create your forms in a different language or use a different framework, Formik won`t work for you. Another disadvantage is the controlled nature of the components. Components are handled in the same way as in React. Although every key press does not call the reducer like Redux Form, but they do rerender according to the state. Application example To get started, we need to install the formik and yup modules using the following commands: npm install formik--save npm install yup--save Next, we import the modules into the required component import (useFormik, FormikProvider, Form) from "formik"; import * as Yup from "yup"; After these actions, we can create a formik object that we will use for the desired form. The formik object is created through useFormik(), to which you need to pass initialValues ​​- the values ​​of all form fields, validationSchema - a scheme for validation, and onSubmit - a function for sending the form (submission). We also use Yup to create a scheme for validation, which we will transfer to formik. Then, we need to decompose the formik object into errors – an object with errors for each field of the form, touched – an object with all fields that checks whether the user has clicked on a specific field or not, values ​​– an object with the values ​​of all fields, handleSubmit is a function that was described in the onSubmit property of the formik object, getFieldProps is a function that accepts as an argument a string with the name of the field and returns all the props of this field, setFieldValue is a function that changes the value of a specific field using 2 arguments: a string with the name fields and a new value. And now we pass formik to FormikProvider and create a form to which we must pass handleSubmit in onSubmit and add a button with type submit so that the form understands that the handleSubmit function should be called through this button. And as follows, we describe each field of this form. For example, the name field (Name), in the Typography component, the color property should be assigned a red color (error color), if the object touched and errors in the name field will contain the error value and the fact that the user has already selected this field. Next, in the TextField, you need to pass a Boolean value to the error property if there is an error, i.e. make a similar check as in the Typography component, you need to transfer the props of a specific field through the getFieldProps() function, add a string with the name of the field to the argument, helperText accepts the string that the component draws under it, in this case, provided that if the user has selected a given field and entered a value, he will receive helperText as the number of characters, which he introduced, onChange accepts a callback, with which we change the value of the field through the setFieldValue function, but if onChange is not set, then everything will still work correctly, because the function getFieldProps with the help of props also solves the change of the field value, and also with the help of touched errors objects, you can display an error message, as shown in the example, if the user did not fill in the field correctly and the error message itself is in the errors object in the property under the name of a specific field, in this case errrs .name, which is output in the div tag if we have an error.