Formik - Building React Forms easier

Learn what is formik and how it helps us to build React forms faster. In every project we need forms and they are always similar with state, validations, submitting. It doesn't make any sense to implement them on your own but it is faster and more convenient to use a library.
TIMESTAMPS
0:00 Building React forms
1:32 Basic formik example
4:41 Formik validation
7:15 Formik validation schema
8:55 Formik components
► CHECK MY COURSES - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
REFERENCES
► Source code - github.com/monsterlessonsacad...
RECOMMENDED VIDEOS
► My editor setup for web development - • Best Text Editor for W...
► Angular Tutorial for Beginners - • Angular Tutorial for B...
► Vue JS Crash Course - • Vue JS Crash Course fo...
► React Hooks Full Course - • React Hooks Tutorial f...
► Typescript Course for Beginners - • Typescript Crash Cours...
► Build a Todo App with Angular - • Build a Todo App With ...
► Creating custom select library - • Custom Javascript Drop...
► HTML Price comparison - • Practice CSS and HTML ...
► How to build Quiz with React hooks - • How to Build a Quiz Wi...
MY COURSES
► NestJS course - • Nest JS Project From S...
► Docker + Docker compose course - • Docker Compose Tutoria...
► Angular + NgRx course - • Angular Course 2021 - ...
► Vue + Vuex course - • Vue Course With Projec...
► React hooks course - • React Hooks tutorial b...

[@predator00071]

Bro, His way of teaching is very didactic. And your video is very short, making it easy to follow. You separated the basics in one video, and more features in others, making it really cool to watch. Thank you!!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@truechannel2k24]

Thank you so much for making stuff in soft a lot easier to understand.

[@ibrahimkhurshid4339]

So well explained.

[@MonsterlessonsAcademy]

Thank you!

[@megamind770]

You're a life saver!

[@MonsterlessonsAcademy]

Thank you!

[@PraveenKumar-ft2kr]

Excellent Video . Thank you :)

[@MonsterlessonsAcademy]

You are welcome!

[@user-jj3ld6kk2u]

Very helpful... thank you

[@MonsterlessonsAcademy]

Glad it was helpful!

[@mrpunch_777_]

Good explanation and straight to the point, content was really helpful . By the way, my company is still using formik.

[@MonsterlessonsAcademy]

As a lot of other companies

[@zaytungbonn184]

it was really really good. thanks a lot

[@MonsterlessonsAcademy]

Most welcome 😊

[@zoki5388]

You are creating good content. Could you make video about react tables?

[@MonsterlessonsAcademy]

Thank you for the idea. I will add it to the list

[@mazingamal3580]

really thanks u bro , u r amazing .. i think it's better than react hook form and very easy

[@MonsterlessonsAcademy]

Most welcome 😊

[@waleedsharif618]

Could you make video about react testing using react testing library + jest ?

[@MonsterlessonsAcademy]

I will add it to the list of ideas for future videos.

[@mateusgomes1086]

Formik is no longer supported since June 2021. Just use react-hook-form instead.

[@MonsterlessonsAcademy]

You are totally right. But there are still lots of companies that use it in production and it is quite stable. And we get new libs that do the same thing too often for my taste :)

[@ThiagoVieira91]

Wow really!? You just made my day. Formik has the same base concepts of Redux-Form, which I'll hate until my death bed. Gonna get this lib out of our project today immediately.

[@gubatenkov]

dont use formik on production. You will get +100500 rerenders on each onChange

[@grenadier4702]

The thing is not in rerenders but how it affects optimization. Many websites use Formik, so I guess everything's okay with that? :)

[@MonsterlessonsAcademy]

Formik does no magic. If you write plain form handling you will also get rerender every time. Which is totally fine because it allows you to show validation/etc. If you have other cases you might write it differently. I don't really see a problem.

[@gubatenkov]

​@@grenadier4702 I know a lot of teams that have and are now rewriting all their site forms from Formik to Hook-form. Any idea why they did this?

[@gubatenkov]

@@MonsterlessonsAcademy no problem until you have to rewrite the code

[@grenadier4702]

@@gubatenkov Convenience or bad architecture overall, not the problem of Formik

[@frozen_tortus]

"Best posible way", difficult to take you seriously with statements like that backed by 0 evidence. I was hopping you where going to compare it with some other similar form management solutions, but I was left disappointed. If I where you I would restrain myself from polarizing statements like that esspecially if you don't back them up.

[@shashankpandey8346]

I really am confused. {formik.errors.email && formik.touched.email && formik.errors.email} In this line, I need to write formik.errors.email twice? It seemed to work touched & error, but not other way around. And is there any hidden catch in touched & errors too?

[@MonsterlessonsAcademy]

You check that you have an error for email and that the field is touched - then you render email error {errors.email && touched.email && {errors.email}}