Learn how to create multi step forms in React with Formik and Yup for validation. Formik Tutorial: • Formik With Yup React ... Codesandbox.io Link: codesandbox.io/s/solitary-fog...
@@letscode7478 Watched it and I must say... It's really clever. I will for sure have it in the back of my mind when working on complex forms again. They don't even need to be 'multi-step' it looks just like a great way to slice big forms to simler, easier to debug/work with chunks and most importantly the validation is segmented too. I tried doing something similar in my project but this video was not up so I just ended up creating my simpler miniforms that were not wrapped inside their own Formik tag but just received 'name' prop and resolved their place in the form based on that. Throw a few useField( ) hooks and you also have small reusable chunks... One thing I can say that is not soo cool about this approch is that validation as in the end it's just a big Yup object at the top of the Formik Food Chain(even if using helper methods like: createMiniformXYZvalidation()) :) From the other topics do you think you could meaby create something more 'css' heavy/packed? Or meaby not packed but like 'good practices for complex css' or working with some css libraries? It would be great to see you opinion/how you approach it. If I asked for this before then sorry, I could have forgot! But I digress. Great material, Thank you! :)
Thanks for watching, I agree with you about the validation just being a big yup object but there isnt much you can do about that unless you create your own custom validator that's simpler. I prefer not to make videos about css. Most of the time if your working on a project you will not be using any css library unless it was specifically asked for. And there are so many ways to handle the same thing in css that it honestly just becomes a matter of preference. If your working at a company you dont really get a choice in how you handle css, there will already be a standard way that the company has came up with and you will have to follow that standard. Its also different if your using styled components or your using css. Everything from folder structure to how responsive design is handled differ from project to project and company to company. There is also the issue of using fluid layouts vs more fixed layouts with query selectors which once again comes down to preference and company standards.
I might create some videos on testing but honestly I'm not too experienced in testing myself, only been doing it for a few weeks now and I think if I created a video about testing it might have some bad practices and I don't feel confident in it yet.
I just looked at the react-hook-form website and its very similar to formik. I prefer formik to most other packages that handle forms. I like how formik lets you create custom components that automatically hook into formik and make it really nice and fast to create new forms.
That's defiantly nice, but its not really needed. React is very performant, and optimising to reduce the number of re-renders often doesn't give any noticeable improvements. The big areas I see where you should focus on performance is for anything that includes large amounts of data needing to be re-rendered such as a graph with lots of data points, and any computationally expensive calculations. A standard form, or even a very large form with lots of re-renders isn't a issue at all. If you're currently using react-hook-form I defiantly suggest checking out formik, once you get a good understand of its basics you will love how nice and easy it is to create forms with it.
