Turning bad React code into senior React code

Join The Discord! → discord.cosdensolutions.io
Welcome to Code Review!
This is a series of videos where I review code that you send me or that I find online. I review the code as I would when I work with my clients. You will see how a senior developer looks and thinks about code in a variety of scenarios, learn about best practices and how to do things the right way, and learn how to become a better developer overall.
Enjoy!
Darius

[@novailoveyou]

The first example has more to learn! Take the routes variable outside of the App component and put it on the same scope as App. That way we're saving ourselves a bit of performance and improving reliability. Also const variables like routes we could name ROUTES in all caps to indicate that that's something constant and within our frontend App

[@icoderdev]

Restructuring another Developer's code is one of the highest skill to possess. Thanks cosden solutions

[@cosdensolutions]

You're most welcome ☺️

[@kollpotato]

Not always, because it's much easier to see other people's mistakes than your own.

[@owenwexler7214]

Refactoring your own code from more than 6 months ago is essentially the same thing.

[@vojinmilovic5787]

I don’t think anyone mentioned that the access token was passed through url which is as insecure as it can be

[@simonesquillace1624]

Yea, he refactor bad react code… so yes looks good but the implementation still sucks. Honestly doesn’t look senior to me

[@emanuellamba5828]

I'm not a Web Dev but that was my first thought too

[@weiss588]

how should it be passed then?

[@emanuellamba5828]

@@weiss588 through POST calls to the server

[@santiagobarrera2387]

@@weiss588An authorization header (bearer token) or cookies. And that can only be considered secure if the connection is made over HTTPS, otherwise there’s no (simple/elegant) secure way

[@2gbeh]

Perfect, but one more thing, your custom hook is supposed to accept the api endpoint as a parameter because its actually different in both places used from the original code. That is, "survey/link/pd-.." and "survey/link/energy-.."

[@cosdensolutions]

Yes you're totally right! Realized this after I filmed the video 🥲

[@hritikkumar2554]

Sol 1: we can also fetch the path text when it gets clicked and we define the onClick method in context and then we can set the path by string concatenation. This will help us to get rid of the array that you just created.

[@saqibmuhammad7218]

One of your well wisher and Keep it Up you are doing amazing work. I learn a lot of things from your videos and shorts,❤

[@cosdensolutions]

Thanks a lot! Means the world 🤙

[@harag9]

Just found your channel, and watching some of your stuff (and subbed). the useEffect actually runs twice and you should code it as such, it runs twice in DEV mode, but when live it will run once. React 18 is when I believed this changed. Because you're calling an API in the useEffect, you will also need an Abortcontroller, and a cleanup in the useEffect to abort the first run. It's a good habit to get into. So far liking your channel.

[@cosdensolutions]

yep, you are totally correct! glad you enjoy the videos!

[@pyyrr]

code in the thumbnail is absolutely amazing

[@tunoajohnson256]

Good stuff! Cheers for sharing

[@dylanarmstrong9328]

As someone who uses the nextjs framework watching you go through the route code was really funny to me. Great solutions though because of dry principle. 😁

[@Shaheer-xs5os]

Man you are one of the best teacher ever, I have watched your react-hook videos and they're so good, respect you 💕

[@cosdensolutions]

Thanks a lot for this! 🤙

[@amey4521]

A more efficient way of handling protected routes would be to create an protected route component to wrap unprotected routes.

[@michaelczolko6093]

100% agree, senior developers use composition instead of props in object array and later mapping with conditionals...

[@slavenDj]

Great video. I use shortcut F2 to rename variables, saves a lot of time, and it's safer.

[@cosdensolutions]

nice!

[@sonhuynh570]

this process remind me the old time lmao btw great vid and keep it up bro

[@cosdensolutions]

Hahaha thanks 🤙

[@sbabup8957]

Never subscribed to anyone before, You are the first. Keep up the good work!! Also whats the font in your editor? I liked it alot..

[@cosdensolutions]

damn, that means a lot! I use the menlo, monaco font. My next video is actually all about my custom vscode setup!

[@Alxndr0]

Nowadays everybody with good speech in a relaxed environment can be seniors 😂

[@imrahulkhatri]

Very helpful

[@hritikkumar2554]

And yes, you are awesome 👍

[@rajendra222php]

we need more video like this

[@zyph.]

Nice video that shows your thought process. I don’t agree that turning the routes into an array is making the code simpler / more readable. It makes it less flexible. Imo a better solution would be to create e.g. a AppRoute component that hides a lot of the boilerplate for you. Feels more React-ty

[@Gilderbrant]

7:25 I think this pattern is used to prevent double call of useEffect in the strict mode (react 18).

[@cosdensolutions]

could be yes, but that's totally the wrong way to approach it

[@muratcemyalin]

you just could have memoize the function with usecallback and give it to useeffect dependency array

[@Isaac-hd6vs]

@@cosdensolutionsyou sure? That’s how the new react doc suggests clean-ups do be done

[@rosssharma542]

@@cosdensolutions What's the right approach? This is the pattern suggested in the official React docs.

[@inakiarias7465]

I think the point of Strict Mode running Effects twice is so that you can notice if your effects have unintended side effects if they run more than once. In this case it does, the fetch is running twice, so according to "good practices" you are making an error. The usual way to solve this "fetch inside useEffect" is to use the AbortController technique, where you pass a signal to the fetch call, and when you return from the effect, inside the cleanup function you abort with controller.abort. You can google it pretty easily, but basically each time the effect runs it will cancel the previous fetch, which should be "intended behaviour"

[@navidghasemi9685]

great that was helpful

[@thecyberhobbit]

"Route" !== "Root" 🤣😂 Jokes aside, nice video dude, keep it goin!

[@user-eo3he8ig3b]

please make one javascript tutorial you are explaining fabulous

[@user-nl2ct8jn9k]

Nice and informative video. Do you by chance have any video about organising files according to features and not types in nextjs?

[@cosdensolutions]

I have a video on general folder structures in React, but nothing that specific unfortunately

[@jeanmax1me]

Very nice

[@carlosmaralit8784]

this is so useful, can you also make like this with codeigniter? thanks

[@devyb-cc]

i believe react router has component called RouterProvider to handle the first use case.

[@af2b]

Amazing

[@nicolamigone8849]

Are you going to do more of these? I'd love to have my code reviewed

[@cosdensolutions]

Yes! Post it in the Discord there's a channel for that

[@AnPham-uz3td]

At 1:50 I completely disagree with you, in a fast pace code changing webapp, I usually see people rewriting/enhancing the root routing of the app (like adding a new login OAuth handler, add logic to track user behavior on specific route of the app with utm, etc). Rewriting it to an array and .map does make the code smaller, yet it makes the code coupling (please google the term "coupling") into your own logic, hence it may gets in other developer's way if they want to add new feature, which is bad for new feature and bad for the business. Actually, the more time I live inside the coding world, the more I see that the best code is the most simple one !

[@cosdensolutions]

Fair point, but this is a mature project and for its use cases this was an improvement. But it ultimately depends on the project. Not every project needs a complex routing structure

[@Mr8000D]

@@cosdensolutions Nearly every routing file looks like the one you showed. It's already easy to read, and add a route. If I open the routing file and it has a loop in it just to reduce the lines in the file, I am not seeing how this is improving readability.

[@cosdensolutions]

@@Mr8000D it's making you not have to repeat all of the same components and auth router. If they're all the same, it's just easier to have a loop so you have one place to look at how everything is rendered

[@m.syafaat]

​@@cosdensolutions You seem to be misunderstanding the concept of "repetition" or you might heard of the DRY (Don't Repeat Yourself) principle. In this case, converting your component into a map doesn't actually improve your code, it could make it worse. It appears that you're introducing a new approach to rendering your routes, which doesn't necessarily align with good coding practices. If this were in my team, I would likely express my confusion with a "WTF", and then suggest, "Please, consider creating a new Route Component named AuthRoute and use it like a standard Route: .". Every time I see people doing something like this, I'm 100% sure that it's a sign of a junior developer.

[@filipecovas]

Completely agree, the map will increase the coupling and decrease de legibility and also some bad performance.

[@LePhenixGD]

6:20 I believe you should've used the .set() method of the .searchParams setter instead of directly assigning a new URLSearchParams object, if you wanted to assign the parameters your way you should use the .search setter instead

[@cosdensolutions]

yeah fair point

[@osamaakhtar6525]

4:15 Interestingly enough you could have placed the routes object outside the App component since it didn’t depend on any reactive variable.

[@cosdensolutions]

Yeah you could've, but that's just personal preference at that point! Wouldn't affect performance in any way

[@muratcemyalin]

@@cosdensolutions i am using the same technic with just making a seperate routes.js file and exporting routes from there and importing to app just a little bit cleaner.

[@piotrzajas9014]

4:04 - You can prolly delete the at the end of map func and make the a self closing tag?

[@cosdensolutions]

Yeah good catch

[@p1erceprc]

What theme is this? thanks

[@dgoenka1]

1:55 how about a custom component and pass it to that?

[@dhruv7827]

What is that tool that is suggesting you the code? Is it an extension?

[@harag9]

Co-Pilot. It costs per month to use, not sure how much.

[@terjeoseberg990]

At 6:55, all my useEffects run twice. I had to do something similar to prevent code that I want to run once from running twice. It seems to be some sort of development debug mode. I don’t like having this code, but I have it because I have no choice. Is there a better solution?

[@cosdensolutions]

Everything runs twice in strict mode, that's on purpose. It's to prevent from making mistakes in your effects. The effect should have no problem running twice, if it does, you need to change it!

[@terjeoseberg990]

@@cosdensolutions, I don’t understand how running all the useEffects twice prevents people from making mistakes.

[@Phooenixsx]

Hi good video , can u share u theme color of js code? ? thanks

[@kirillvoloshin2065]

got to propose to switch to TS

[@marcossequeira5433]

It could be a better solution use an AuthGuard component and pass as childrens all the routes that you want to be protected?

[@cosdensolutions]

depends how the component is structured. Maybe it doesn't allow this this way. But worth a try

[@gustionusamba90]

What is the theme and font do you use?

[@cosdensolutions]

material theme darker - menlo monaco font

[@gustionusamba90]

@@cosdensolutionsthanks sir

[@cezarygrzanka4229]

4:10 and now... you just receive mail that some routes has to be wrapped in other component, that some of them may be exact, and for some reason to one of them you have to pass params. I think you just unnecesary complicated quite simple part od code just to reduce couple LOC 🤔

[@cosdensolutions]

Again, you can create as many hypotheticals as you want. I reviewed this for this scenario, which is valid

[@captsiro233]

Why do you have vim plugin if you are still using mouse... I don't have vim plugin and I use my mouse less.

[@cosdensolutions]

It's not a competition 😅 to each their own

[@groovebird812]

First you return generateURL, AuthToken and url and at the end end of the video only url? This was to quick for me

[@cosdensolutions]

Yeah I thought initially we would need to return all 3, then we only needed the token so I changed it

[@isaacjon]

U said that we cant use state in a custom hook. What does that mean? U just used useEffect and useState hooks in this custom useGeneretaeUrl hook.

[@cosdensolutions]

Hmm, where did I say that? You Def can use hooks in custom hooks!

[@isaacjon]

​@@cosdensolutions9:45 can you check and explain it please

[@samansaeedi1498]

He says you CAN, and that's the beauty of it

[@isaacjon]

@@samansaeedi1498 ahh i got it. It sounded like (can't)

[@icoderdev]

❤

[@cosdensolutions]

❤️

[@ooorayooonyoooo]

what is your color theme mate?

[@cosdensolutions]

Material theme darker

[@ooorayooonyoooo]

@@cosdensolutions nice 👌🏼

[@SacrificialGoat94]

Isn't sticking the access token in the search params a horrible idea?

[@cosdensolutions]

you would usually put it in the headers of the request

[@SacrificialGoat94]

@@cosdensolutions Really sherlock? Yet you did not mention that while creating "Senior level code" perhaps you're not quite ready to be making such claims.

[@ask43242flight]

Do you have a tutorial that shows how to embed JavaScript code within HTML(i.e. JSX)? I don't have solid knowledge to know when I should use () and when I should use {}. Basically, I highly depend on VSCode to help finding issues for me while I am write JSX code. Thank you

[@cosdensolutions]

Hmm not specifically, but in every video I kinda do that 😅 it just comes with time! So keep practicing

[@WolfamStart]

Where are the tests, to prove you don't change the functionality?

[@cosdensolutions]

😅

[@jotasenator]

8:04 🤕

[@tauraamui]

not related, but I've never seen someone using VIM or the VIM plugin on an editor but completely defeat the point by just using the mouse, it's painful to watch

[@cosdensolutions]

Well, what can I say.. I'm sorry you feel this way 😅

[@savire.ergheiz]

There is no such things as bad code. Any senior engineer always know that fact. There are only codes that carelessly being made due to many reasons. If you said its a bad code then how you justify those bugs that always goes into production no matter how good or big the companies behind?

[@cosdensolutions]

chill my dude, it's just a title

[@john_dren]

I found it funny how the refactoring takes you like 5 min tbut a junior like me half a day or a day :D

[@cosdensolutions]

hahaha it comes with time! keep at it 🤙

[@helios8567]

you did the code better, but it's stil crap. You could do this code a lot more cleaner. Not a senior level imho.