Turning bad React code into senior React code
ฝัง
- เผยแพร่เมื่อ 21 ก.ย. 2024
- 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
Restructuring another Developer's code is one of the highest skill to possess. Thanks cosden solutions
You're most welcome ☺️
Not always, because it's much easier to see other people's mistakes than your own.
Refactoring your own code from more than 6 months ago is essentially the same thing.
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
I don’t think anyone mentioned that the access token was passed through url which is as insecure as it can be
Yea, he refactor bad react code… so yes looks good but the implementation still sucks. Honestly doesn’t look senior to me
I'm not a Web Dev but that was my first thought too
how should it be passed then?
@@weiss588 through POST calls to the server
@@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
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-.."
Yes you're totally right! Realized this after I filmed the video 🥲
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.
yep, you are totally correct! glad you enjoy the videos!
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.
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
Hi @Codesen
Please create a detailed video on contributing to react-native open source and approach to solve a problem. Thanks. You are amazing.
A more efficient way of handling protected routes would be to create an protected route component to wrap unprotected routes.
100% agree, senior developers use composition instead of props in object array and later mapping with conditionals...
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,❤
Thanks a lot! Means the world 🤙
Great video. I use shortcut F2 to rename variables, saves a lot of time, and it's safer.
nice!
Man you are one of the best teacher ever, I have watched your react-hook videos and they're so good, respect you 💕
Thanks a lot for this! 🤙
Nowadays everybody with good speech in a relaxed environment can be seniors 😂
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
it's all the same tbh. Matter of preference at this point!
@@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
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 !
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
@@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.
@@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
@@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.
Completely agree, the map will increase the coupling and decrease de legibility and also some bad performance.
keep this series going sir
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. 😁
7:25 I think this pattern is used to prevent double call of useEffect in the strict mode (react 18).
could be yes, but that's totally the wrong way to approach it
you just could have memoize the function with usecallback and give it to useeffect dependency array
@@cosdensolutionsyou sure? That’s how the new react doc suggests clean-ups do be done
@@cosdensolutions What's the right approach? This is the pattern suggested in the official React docs.
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"
code in the thumbnail is absolutely amazing
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
yeah fair point
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 🤔
Again, you can create as many hypotheticals as you want. I reviewed this for this scenario, which is valid
Thaaanks! amazing 🥰
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..
damn, that means a lot! I use the menlo, monaco font. My next video is actually all about my custom vscode setup!
this process remind me the old time lmao btw great vid and keep it up bro
Hahaha thanks 🤙
"Route" !== "Root" 🤣😂
Jokes aside, nice video dude, keep it goin!
Its the correct british pronunciation
@@thechaoslp2047 right... that's why I said "jokes aside"
First thing I'd do is add and run Prettier.
Thank You
we need more video like this
Good stuff! Cheers for sharing
4:15 Interestingly enough you could have placed the routes object outside the App component since it didn’t depend on any reactive variable.
Yeah you could've, but that's just personal preference at that point! Wouldn't affect performance in any way
@@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.
Nice and informative video. Do you by chance have any video about organising files according to features and not types in nextjs?
I have a video on general folder structures in React, but nothing that specific unfortunately
i believe react router has component called RouterProvider to handle the first use case.
please make one javascript tutorial you are explaining fabulous
Why do you have vim plugin if you are still using mouse... I don't have vim plugin and I use my mouse less.
It's not a competition 😅 to each their own
how can you select multiple same word and update name , which extension bro ?
And yes, you are awesome 👍
Where are the tests, to prove you don't change the functionality?
😅
4:04 - You can prolly delete the at the end of map func and make the a self closing tag?
Yeah good catch
Are you going to do more of these? I'd love to have my code reviewed
Yes! Post it in the Discord there's a channel for that
Very helpful
this is so useful, can you also make like this with codeigniter? thanks
First you return generateURL, AuthToken and url and at the end end of the video only url? This was to quick for me
Yeah I thought initially we would need to return all 3, then we only needed the token so I changed it
It could be a better solution use an AuthGuard component and pass as childrens all the routes that you want to be protected?
depends how the component is structured. Maybe it doesn't allow this this way. But worth a try
great that was helpful
1:55 how about a custom component and pass it to that?
Very nice
Amazing
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.
Hmm, where did I say that? You Def can use hooks in custom hooks!
@@cosdensolutions9:45 can you check and explain it please
He says you CAN, and that's the beauty of it
@@samansaeedi1498 ahh i got it. It sounded like (can't)
you did the code better, but it's stil crap. You could do this code a lot more cleaner. Not a senior level imho.
got to propose to switch to TS
Isn't sticking the access token in the search params a horrible idea?
you would usually put it in the headers of the request
@@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.
What is that tool that is suggesting you the code? Is it an extension?
Co-Pilot. It costs per month to use, not sure how much.
What theme is this? thanks
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
Well, what can I say.. I'm sorry you feel this way 😅
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?
chill my dude, it's just a title
8:04 🤕
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
Hmm not specifically, but in every video I kinda do that 😅 it just comes with time! So keep practicing
What is the theme and font do you use?
material theme darker - menlo monaco font
@@cosdensolutionsthanks sir
what is your color theme mate?
Material theme darker
@@cosdensolutions nice 👌🏼
❤
❤️
I found it funny how the refactoring takes you like 5 min tbut a junior like me half a day or a day :D
hahaha it comes with time! keep at it 🤙