Build a Multi-Step Form in React Like a Pro

[@joshpraise1966]

I had recently built a very large Onboarding Form weeks ago using RHF, Zod and Zustand. You just showed me an elegant way to share and persist the data across forms. Would be going back to refactor some part of my components. Keep up the good job! 🎉

[@jsa247-l3e]

I think it would be great to show the final result right at the beginning of the video! It really grabs attention and gets everyone excited!

[@dexterjr2616]

Perfect, I just need (I wish) few seconds in the beginning for explanation of the whole setup. As at the end the puzzle is completed and kind of obvious. Kudos for explaining when AI is helping for boilerplate code. looking forward for the next video

[@luznoceda423]

There's no way my man upload a new tutorial in the first night of Lunar New Year 😭 Not the🧧I expected but needed

[@minhnguyenvan7352]

I stucked at this problem because I did know "How can i optimize it". Suddenly, i saw this video when I had been relaxed on KZbin. It's very helpful. Thank you very much 🎉

[@jason.zubiate]

Thanks for putting me on to zustand.

[@tannertanner1]

hydration part at the end is cool

[@Ferno2k]

What about single page multi tab form is there any tip you can give for that?

[@elpeeda42]

Could you please also do multi forms in react hook form? I've always struggled to find the correct solution while using it with backend data

[@FalkvonZydowitz]

Great work! I like your videos very much. Even though I'm not the biggest fan of AI tools and projects that consists more or less from 3rd party dependencies, it's a great example what's possible if one masters his tools.

[@lesuuh]

Right on time... Was currently looking to build a multi step form

[@jessiepinkemen]

Need more of these 🔥

[@navexor]

Thank you very much for the great video. Have a small question left. If we have a form with 10 steps and 100 fields, some of which are optional, does that mean that at each of the nine steps we need to validate all the previous (required only) fields from the previous steps (field1 & field2 & etc.) in useEffect? Is there any way to optimize this? Maybe use zod or smthng?

[@yuridukhanin19]

The most problems with nested array with array, dynamic fields, context with custom resolver, complex custom validation with throwing errors as result + super intresting, but rather hard to implement this with server error

[@ksubramanyeshwara]

Looking forward to more High quality videos Thank you

[@kuysjess7821]

thank you for the idea

[@전인표-c4m]

Thanks, that's what I want😎

[@VictorScript]

My man ❤

[@AqibRime]

Very good video

[@ptolemyhenson6838]

I don't like how Cursor seems to do not just code insertion like Copilot, but also active modification of what's already there across multiple lines. It makes autocomplete more confusing.

[@cosdensolutions]

I totally understand. I also felt like that at first, but you do get used to it!

[@tudy2006]

Why not just use a context with a form and push to it from each step component? I feel liké its easier than création 3 separate forms and using a store

[@rahulray3432]

Love from Nepal. I have a small request, can you make a video on the user registration, email verification, and login flow in React and context api to store user details after login.

[@hazemkhaled9416]

But I believe with this implementation you can't go back to prev steps or you can but you will have to fill the form step as till now it is not prefilling the data to the form, am I right?

[@Jorshan29]

what about using react form t implement the same thing without a store !

[@_andrewpeacock]

You are BY FAR my favorite React teacher. I go to your channel EVERY SINGLE TIME. Often before hitting LLMs 👀

[@HamidehSheikh-e3s]

That was great😍🥹

[@jonivainio-kaila3713]

The data could be stored also to the url search params

[@tomaszp2580]

password can be?

[@jonivainio-kaila3713]

@tomaszp2580 well, the local storage is not either a safe place to store a password 😄

[@jonivainio-kaila3713]

@@tomaszp2580 having a password in a multistep form is not the best one as an example. Passwords shouldn't be stored in a state at all

[@tomaszp2580]

@@jonivainio-kaila3713 Yes. But search params is something what all can see, about localstorage most of users dont know. But for sure it shoudnt be store even encrypted and write by user everytime he are in form again(or pass put call every form step to backend).

[@cosdensolutions]

Yes, you would just need an extra layer to have type safety

[@eluferedonatus2096]

Hello cosden, the project react url is not working

[@kamildwyer6012]

Is it not some sort of security issue? 1) Once the password is submitted its still visible in local storage in plain text, 2) There is password, first name and last name validation however in last page we can change it in local storage without any validation, reload the page and send the data without any validations? Great video but i guess not very suitable for onboarding flow.

[@shakilahmed6870]

before creating something in a longer video, first of all show use what are we going to make then jump into the code.

[@pankaj-kumar-yadav-67]

Vs code theme name?

[@leonard3468]

Hi, can you explain to me why you always have your cursor on "insert" the whole time? Is there a specific reason or is it just a habit?