Let's Turn Beginner React Code Into Clean Code

Let's turn a beginner-level React component into a more advanced component. Of course, this is just my way of doing things! I think the refactored version is more readable and enjoyable to work on as your project grows.

BIG thanks to Rahul and everyone who sent in their repo to make it possible for us all to learn from!!

-- my links

[babisdigos]

Adding eslint and some basic rules is one of the best things a beginner can do to improve

[VLOXy]

You added several new dependencies for the little functionality there was. Not sure if I'd call that a win unless the entire application is refactored (now or in the future) to make optimal use of those libraries. Maybe an idea for future videos like this, do a refactor without additional libraries. Then, take it a step further and use the libraries.

As far as refactoring goes, you really just rewrote everything, altering functionality in the process:
- toasts
- min/max username/password characters requirements (this could have consequences throughout the app as there were no such requirements before). Preventing empty fields could just be done by adding required to the input.

Regarding putting the login path in a config file, seems unnecessary to me as this doesn't typically ever change and is usually only used in one place, the login page.

I'm sorry if I sound nit-picky, but I've seen people refactor things in this way, introducing problems and bugs where there previously were none because they started changing things in the same way you did.

I mostly commented because you said refactoring, refactoring means improving the code without changing functionality and that wasn't the case here. Not sure if you used the term as a mistake, just felt I had to point this out as it might teach people the wrong things.

[owenwexler]

Very informative video. Learning from other people's mistakes is a lot less damaging to both our businesses and our ego than having to learn from our own. More of these please!

[nemeziz_prime]

Great video Josh! Need more such code review videos from you, because your content is really helpful and truly amazing! Thank you very much XD

[jussinevavuori]

There's a potential bug in this refactor (and the original): The onSuccess runs asynchronously and uses getValues(). The user might modify or delete the input field value if the login handler takes a long time to run, therefore the user will be logged in with the wrong username. Instead you want to get the username from the onSuccess parameters, which provide you access to the parameters that were used to invoke the mutation. This way the username will always be correct!

[FalconCodes-dxnj]

Someone else also pointed out - Maybe an idea for future videos like this, do a refactor without additional libraries. Then, take it a step further and use the libraries.
I second this I think the best advice for that beginner would've been to show them form validation & good code structure from scratch without libraries, then use these libraries show them how they make things easier and what are the tradeoffs (controlled vs uncontrolled forms). Then they could try themselves to take it a step even further & create a Form store or HOCs and do everything through a custom component.

Another very helpful comment pointed out that in an actual project the UI/UX, data from backend would be already decided and approved, and if this is how they decided it your job is to make it clean and maintainable without changing those things, something to keep it mind which is why doing a few things from scratch first helps a lot in learning

[craciun_]

This is very informative! Please make this into a series!👍

[kushagra.sarathe]

Thanks for creating this kind of videos Josh, I get to learn new things every time I watch your videos :D

[rustwithoutrust]

I absolutely demand you to continue this type of videos. Next time I will definitely submit my project and let you check it out!
Also, try not to say "Why the hell...?" or "Why would it be...?", because it is a bit rude.

[xya]

I didn't really know the importance of react-hook-form and zod but now that I saw the combination of those two and how amazing it is I'm going to be start using. Also I used to use react-toastify which is good but the toast from react-hot-toast is much cleaner (imo) so thanks for this really amazing educational video.

[LegendaryAks]

Great assessment, can we have more code review videos like this.

[Fralleee]

Never add a max-char validation to a password. That is just counterproductive.

[Tuser]

I think this type of content is good to add to the rotation😊

[simontamas]

I believe that merely learning the syntax without gaining a deep understanding of how things work is a detrimental practice for beginners. Your advice is beneficial for experienced programmers; however, I think that writing the entire code and using as few tools and libraries as possible provides beginners with more knowledge. Simply copying and pasting boilerplate code without thinking may hinder their learning process.

[capital]

Thank you very much. Here’s something I’m sure the whole community would love can we stimulate from beginning to end a production ready next js apllication that is feature rich, I’m sure I’m not the only one that gets stuck when asked questions about production.

[abiswas]

Great video! I'm relatively new to react and this peer-review style video is EXTREMELY helpful. Would love to see more videos like this :))

But for a question -
In a project that is using redux, what considerations would you account for while choosing between rtk query and react query? Are there any major gains for one over the other?

[rjwhite]

You need to do more of these videos! This was amazing. Never even thought about combining react-hook-form and usemutation together! You should do a video going into more detail on that

[theblackalbino]

Would love to seem more of these videos in the future. Great stuff as always!

[spidfair]

Good tips. Proper naming of functions/variables may seem insignificant but is so important. Makes it so much easier to understand code by colleagues, AI assistants and yourself in the future.
I do have a complaint on package usage. For a login form, why would you bloat your JS with zod, hookform resolver, axios, react query, when without them you can have everything they're offering with the same amount of code? RHF could by itself handle the type-safety with validations, as well as provide a flag (isSubmitting) for monitoring the mutation (which could just be a native fetch).

[Tommy-and-Ray]

im 30 secs into the review and i already know it's gonna be a dank video 😂