Turning bad React code into senior React code

Рет қаралды 88,933

Жыл бұрын

Join The Discord! → discord.cosden...
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

Пікірлер: 141

@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 11 ай бұрын

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

@novailoveyou 11 ай бұрын

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

@vojinmilovic5787 11 ай бұрын

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

@simonesquillace1624 11 ай бұрын

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

@emanuellamba5828 11 ай бұрын

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

@weiss588 11 ай бұрын

how should it be passed then?

@emanuellamba5828 11 ай бұрын

@@weiss588 through POST calls to the server

@santiagobarrera2387 11 ай бұрын

@@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 11 ай бұрын

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.

@harag9 9 ай бұрын

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 9 ай бұрын

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

@zyph. 4 ай бұрын

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

@amey4521 11 ай бұрын

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

@michaelczolko6093 7 ай бұрын

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

@Alxndr0 11 ай бұрын

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

@AnPham-uz3td 11 ай бұрын

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 11 ай бұрын

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

@siroccomask 11 ай бұрын

@@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 11 ай бұрын

@@siroccomask 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 11 ай бұрын

@@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 11 ай бұрын

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

@Gilderbrant 11 ай бұрын

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

@cosdensolutions 11 ай бұрын

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

@muratcemyalin 11 ай бұрын

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

@Isaac-hd6vs 11 ай бұрын

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

@rosssharma542 11 ай бұрын

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

@inakiarias7465 11 ай бұрын

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"

@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 🤙

@slavenDj 11 ай бұрын

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

@cosdensolutions 11 ай бұрын

nice!

@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! 🤙

@irfansaeedkhan7242 9 күн бұрын

keep this series going sir

@cezarygrzanka4229 11 ай бұрын

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 11 ай бұрын

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

@irfansaeedkhan7242 9 күн бұрын

as senior developer once told me that do minimum code in jsx so i would recommend do the map outside jsx and just use the variable with complete list in jsx

@cosdensolutions 9 күн бұрын

it's all the same tbh. Matter of preference at this point!

@irfansaeedkhan7242 3 күн бұрын

@@cosdensolutions ohh so there is no good practice bad practice in this regard, its just that how you prefer , or it looks cleaner to you

@LePhenixGD 11 ай бұрын

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 11 ай бұрын

yeah fair point

@dylanarmstrong9328 10 ай бұрын

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. 😁

@pyyrr 11 ай бұрын

code in the thumbnail is absolutely amazing

@thecyberhobbit 11 ай бұрын

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

@osamaakhtar6525 11 ай бұрын

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 11 ай бұрын

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

@muratcemyalin 11 ай бұрын

@@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.

@tunamusic2314 Ай бұрын

how can you select multiple same word and update name , which extension bro ?

@sbabup8957 10 ай бұрын

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 10 ай бұрын

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

@tunoajohnson256 10 ай бұрын

Good stuff! Cheers for sharing

@calefnicoft 25 күн бұрын

Thaaanks! amazing 🥰

@sonhuynh570 Жыл бұрын

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

@cosdensolutions Жыл бұрын

Hahaha thanks 🤙

@devyb-cc 10 ай бұрын

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

@rajendra222php 7 ай бұрын

we need more video like this

@WolfamStart 11 ай бұрын

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

@cosdensolutions 11 ай бұрын

😅

@captsiro233 11 ай бұрын

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 11 ай бұрын

It's not a competition 😅 to each their own

@zebapy Ай бұрын

First thing I'd do is add and run Prettier.

@aymenbachiri-yh2hd 3 ай бұрын

Thank You

@user-nl2ct8jn9k 10 ай бұрын

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

@cosdensolutions 10 ай бұрын

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

@carlosmaralit8784 11 ай бұрын

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

@nicolamigone8849 11 ай бұрын

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

@cosdensolutions 11 ай бұрын

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

@user-eo3he8ig3b 11 ай бұрын

please make one javascript tutorial you are explaining fabulous

@hritikkumar2554 11 ай бұрын

And yes, you are awesome 👍

@piotrzajas9014 11 ай бұрын

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

@cosdensolutions 11 ай бұрын

Yeah good catch

@dgoenka1 11 ай бұрын

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

@groovebird812 11 ай бұрын

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

@cosdensolutions 11 ай бұрын

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

@imrahulkhatri 10 ай бұрын

Very helpful

@marcossequeira5433 10 ай бұрын

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

@cosdensolutions 10 ай бұрын

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

@navidghasemi9685 11 ай бұрын

great that was helpful

@p1erceprc 10 ай бұрын

What theme is this? thanks

@jeanmax1me 11 ай бұрын

Very nice

@af2b 11 ай бұрын

Amazing

@dhruv7827 11 ай бұрын

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

@harag9 9 ай бұрын

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

@helios8567 10 ай бұрын

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

@isaacjon 11 ай бұрын

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 11 ай бұрын

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

@isaacjon 11 ай бұрын

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

@samansaeedi1498 11 ай бұрын

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

@isaacjon 11 ай бұрын

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

@kirillvoloshin2065 11 ай бұрын

got to propose to switch to TS

@SacrificialGoat94 11 ай бұрын

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

@cosdensolutions 11 ай бұрын

you would usually put it in the headers of the request

@SacrificialGoat94 11 ай бұрын

@@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.

@tauraamui 11 ай бұрын

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 11 ай бұрын

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

@gustionusamba90 11 ай бұрын

What is the theme and font do you use?

@cosdensolutions 11 ай бұрын

material theme darker - menlo monaco font

@gustionusamba90 11 ай бұрын

@@cosdensolutionsthanks sir

@ooorayooonyoooo Жыл бұрын

what is your color theme mate?

@cosdensolutions Жыл бұрын

Material theme darker

@ooorayooonyoooo Жыл бұрын

@@cosdensolutions nice 👌🏼

@ask43242flight 11 ай бұрын

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 11 ай бұрын

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

@savire.ergheiz 11 ай бұрын

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 11 ай бұрын

chill my dude, it's just a title