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

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

@cosdensolutions

10 ай бұрын

You're most welcome ☺️

@kollpotato

10 ай бұрын

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

@owenwexler7214

9 ай бұрын

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

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

@simonesquillace1624

9 ай бұрын

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

@emanuellamba5828

9 ай бұрын

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

@weiss588

9 ай бұрын

how should it be passed then?

@emanuellamba5828

9 ай бұрын

@@weiss588 through POST calls to the server

@santiagobarrera2387

9 ай бұрын

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

@cosdensolutions

10 ай бұрын

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

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.

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

10 ай бұрын

Thanks a lot! Means the world 🤙

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

@michaelczolko6093

5 ай бұрын

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

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

7 ай бұрын

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

code in the thumbnail is absolutely amazing

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

@cosdensolutions

10 ай бұрын

Thanks a lot for this! 🤙

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

@cosdensolutions

9 ай бұрын

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

@muratcemyalin

9 ай бұрын

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

@Isaac-hd6vs

9 ай бұрын

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

@rosssharma542

9 ай бұрын

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

@inakiarias7465

9 ай бұрын

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"

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

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

8 ай бұрын

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

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

@cosdensolutions

9 ай бұрын

nice!

Good stuff! Cheers for sharing

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

9 ай бұрын

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

9 ай бұрын

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

9 ай бұрын

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

9 ай бұрын

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

9 ай бұрын

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

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

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

@cosdensolutions

10 ай бұрын

Hahaha thanks 🤙

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

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

9 ай бұрын

yeah fair point

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

@cosdensolutions

8 ай бұрын

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

we need more video like this

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

9 ай бұрын

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

@muratcemyalin

9 ай бұрын

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

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

@cosdensolutions

9 ай бұрын

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

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

9 ай бұрын

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

Thank You

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

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

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

9 ай бұрын

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

9 ай бұрын

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

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

please make one javascript tutorial you are explaining fabulous

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

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

@cosdensolutions

9 ай бұрын

Yeah good catch

What theme is this? thanks

Very helpful

And yes, you are awesome 👍

Very nice

great that was helpful

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

9 ай бұрын

It's not a competition 😅 to each their own

Amazing

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

@cosdensolutions

9 ай бұрын

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

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

@cosdensolutions

9 ай бұрын

😅

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

@harag9

7 ай бұрын

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

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

@cosdensolutions

8 ай бұрын

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

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

9 ай бұрын

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

@isaacjon

9 ай бұрын

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

@samansaeedi1498

9 ай бұрын

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

@isaacjon

9 ай бұрын

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

What is the theme and font do you use?

@cosdensolutions

9 ай бұрын

material theme darker - menlo monaco font

@gustionusamba90

9 ай бұрын

@@cosdensolutionsthanks sir

got to propose to switch to TS

what is your color theme mate?

@cosdensolutions

10 ай бұрын

Material theme darker

@ooorayooonyoooo

10 ай бұрын

@@cosdensolutions nice 👌🏼

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

@cosdensolutions

9 ай бұрын

you would usually put it in the headers of the request

@SacrificialGoat94

9 ай бұрын

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

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

9 ай бұрын

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

❤

@cosdensolutions

10 ай бұрын

❤️

8:04 🤕

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

9 ай бұрын

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

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

9 ай бұрын

hahaha it comes with time! keep at it 🤙

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

9 ай бұрын

chill my dude, it's just a title

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