Turning bad React code into senior React code

what's up guys Terrace cousin here in this video we're taking bad code and we're turning it into senior level react code I'm super excited I really hope that you're a tool there's a ton to learn in this video so make sure to watch and watch until the end and yeah let's begin cool so this is the app that we're going to be looking at today it's called evolve into the best of my knowledge this is a sort of productivity app this was sent to me on Discord essentially this user wanted me to look at the

code of his app review it give some tips so that he could implement this and turn it into a senior level react application this is the code for this app there's the front-end folder which holds all of the files related to react that's what we're going to be spending all of our time in this video and then there's the SRC folder which is the back end for this and that's written in Java cool so let's begin let's look at some actual code so let's open the front-end folder let's go into SRC and then let's open

up app.jsx this app file is essentially the root of this entire application this is where a lot of the things are set up like this auth provider here and also where the roots are set up to kind of be able to render the different parts of the application now the first thing that I would comment on in this page the first thing that kind of strikes me as obvious is that if you look at all of these routes here there's a lot of repeated code right like every single route take the cervix for example every

single route has a path of type string has an element property which gives it the actual element to render and then if this root requires authentication which most of them do it's rendering wrapping it in this require auth component and then passing the login pass to I assume redirect to now this is bad because you're essentially writing a lot of the same code over and over again unnecessarily instead a better approach which is actually what I'm going to suggest now is to create a list of all of the routes give them all of these properties

and then just map over them inside of the component that's going to make the code a lot cleaner and a lot easier to understand so we're going to come here and do const roots and then that's going to be equal to an array and then each array is going to have an object and this object is going to have the properties of that route for example it's going to have the path right which in this case it's going to be home let's take home first for example let's just put do this and then put home

here then what else we have the element which is going to be an element so we'll do element and that is going to be in this case this home component here like so and then it's going to be actually you know what let's not do this let's do home like this because we're going to want to use it in the actual code so that's fine and then our last property is going to be requires off right so we're going to put here requires auth and then that's going to be true because the home requires true

so I've skipped a little bit into the future I just added all of these roots to this Roots array here and then what we can do is we can just come here where our roots are and then we can do Roots dot map and then we're going to go for every root and that is going to return and let's now think about what we actually want to return we want to return a root right which is going to be the same thing we're returning here then this path is going to be equal to root dot

path right because every single one of these has a path here right we're essentially putting the same code just organizing it a bit differently then we have the element which is going to be here right either the element or we're going to do this if root dot requires auth we're going to actually let co-pilot do everything for us so if the root requires auth we're going to render this require off and then we're going to render our element here and then close this otherwise we are going to render only the element of the root because

it does not require auth if I save this it should be fine then to make this error go away we actually need to provide the key so the key is going to be the root dot path and the reason why we can do this is because we know that in our actual list every single path is going to be unique there's not going to be two routes that are going to have the same path so we can use the path as our key in our map and with this we can actually get rid of all

of this code for all of these other routes I'm just going to come here and delete all of them and then what we're left with is something that is functionally equivalent right it's doing the same exact thing the only difference is that now we've only written this code once cool now let's move on to a different file because this one is kind of done there's nothing more to cover in it the one we're going to look at is in this component serum let's look at purpose driver survey which I assume is a survey of some

kind I'm not really sure and then the first thing that you know looking at this code the first thing that kind of is obvious to me is first of all this auth header here looks to be using this hook I think this is from react authkit unfortunately I haven't used react auth kit so I'm not sure how that works but if you look at this cookie value here right it's looking at document.cookie and it's finding the cookie that starts with auth which indicates to me that this might be the off token that it's getting from

the cookie which then means that I'm not really sure what this auth header does here like why do we have an auth header but then we're also looking at the auth cookie also this cookie value here is a very generic name for a variable it's not really obvious what this actually means and if you look at the code it's being sent here to the back end as the access token so this is essentially the authentication token right so I would rename this and all of its occurrences to auth token for it to be a little

bit more descriptive into what it actually is and what it does then if you look at this function here actually I don't like it so we're fetching based off of this URL which is hard coded as a string and then we're doing plus and then new URL search parms did you know that you can do something like this you can do const URL equals new URL you can actually create a URL object from JavaScript and you can do the string gear survey dot link PD guidance and then that can be your base URL and then

you can do const params equals new search params right and then actually sorry it's URL search params and then you can give all of the things that you had here so like access token you can give it here and then you can do url.search params equals params and then you fetch here you can just literally do your URL and then this is a lot cleaner and it's you know it's just a little bit better and then if you scroll down there's this piece of code which is really interesting but also really bad at the same

time so this is a use effect that is actually running this function Above This generate URL function but it's doing a little bit of extra magic if you will or I should say it's trying to do something because actually it's doing nothing so first what this effect is doing is it's setting ignore to false and then on the next line if ignore is false it's going to call this function generate URL and then in the return in the cleanup function of this effect it's going to set ignore to true now the thing is you've given

an empty dependency array which means that this use effect is only ever going to run once it's going to run when the component is mounted and then it's going to run when the component is unmounted which means that if it runs only once your ignore here on that run is going to be false and then it's going to trigger this piece of code here which is going to run your generate URL function and then in the cleanup function it's only going to ever run once it's going to set ignore to true but then there's no

further dependency to be run because this component is going to be unmounted and so this effect is going to be destroyed so essentially the fact that you had ignore here false and then sending it to True is actually doing nothing so you're better off just removing it and then removing this condition and then just calling generate URL like this and maybe even format this a little bit just so it's cleaner right cool so that's this page done then let's move on to survey because I want to look how survey differs from purpose driver survey which

we were on before and just right off the bat you can see that this is a lot of repeated code and this might actually be the same code right we have this cookie value here we have this unused auth header and this generates URL function and let me see is it doing it yes it is it's also doing this ignore crap if I'm being honest when it's actually not doing anything so what I would do I at this point because this function is being used in two different places now like I said before if it's

to be used in multiple places I would extract this into its own custom hook maybe even use this cookie value here in that same hook and just get everything that way so that we don't have to worry about it and I think that would actually make this code a lot better and these two components these two pages a lot smaller so let's actually do it let's not just talk about it let's actually implement the things that we're talking about I'm going to create a new folder here called Hooks and then inside of it I'm going

to create a new file and that's going to be use auth no use generate URL dot TS actually.js because this is a JavaScript project and then here I'm going to do export cons to use generate URL and then for now I'm going to put it empty and I'm literally going to take all of this code even this cookie value here because as you're going to see this cookie value is only used here so I'm going to take all of this code come back here paste it here right and then all we're gonna do is we're

gonna do return and then two things generate URL and then cookie value and actually just like we did before I'm going to rename this to of token so auth token right and then we're going to do this this way so now we have created a custom hook right called use generate URL that has the auth token which is the same logic as we had before and also has the function generate URL which we can now use and now I'm seeing here that we have an error that set URL is not defined because in here we

are using this here right so we're going to do move this over here as well we're going to create our state variable here at the top because you can put State inside of custom hooks right that's the beauty of it why is it not importing import use state from react that should work right and then we have URL this set URL is now going to work fully and then we're also going to return this URL here just so that we have everything else just the same as we had in the actual component then in the

component we can first get rid of the function and all of the state here that we had before and then we can even move this use effect right we actually don't need to put it here we can put it inside of here directly and then actually that's not what I wanted to do I wanted to just take this use effect we're going to take it here put it here remove this ignore stuff because as we said it's not needed right so we're going to get rid of this get rid of this we're actually going to

do the same exact thing we're going to define the function inside of this use effect we're going to import use effect from react so use effect from react and actually I don't know why there's no formatting here so forgive me for the formatting it's a bit ugly but it is what it is and then yeah this generate URL Hook is doing the exact same thing and we can just come here and do use generate URL and then get rid of all of these and then maybe fix the formatting man why is this formatting so bad

we can clear all these Imports and then oh this should return the URL fair enough so we should do const URL and then for now that's not going to work but what we can do is we can return the URL from our hook so we can come here and do return URL so this Hook is going to do exactly the same logic as we we had before with the only difference that is going to return this hook which means that we have access to it here in this component and we can pass it here to

our actual iframe which again I'm not I haven't looked into I haven't even thought about why we're using an iframe but that's besides the point then what we can do we can take this generate URL we can come to our other component and with the beauty of everything we can replace completely everything use this hook why is this not working why can I not import use generate URL can I import I can import it just like this that's fine get rid of this and now we have the same code as we had before our component

is now under 20 lines of code our survey component is under 20 lines of code we can even maybe even reuse this whole iframe thing right we could do this and we've done it all with the help of a custom hook that allows us to extract common reusable logic into a custom hook and then import it and use it wherever we need and really that's kind of like the entire app there's not that much more to it everything is in this components folder which again should be separated into pages and components but as you can

see here there's not that many components we have an analytics dashboard which I haven't looked at but again it's also very simple right this is an application that is still in development so I'm not expecting too much from it but I really hope that the things that I was able to give you thus far are helpful and that you're actually going to implement them especially since I'm going to turn this now into APR and submit it to you so there you go that was the code review if you enjoyed this video if you found it

useful you can subscribe right here if you want to watch another video of mine I'm sure there's one here on the screen it's super super useful if you want me to personally review your code maybe even make a PR with some changes to suggest I would highly recommend that you join the Discord it's the first thing in the description I would really check it out if I were you otherwise thank you so much for watching my name is Darius this is custom Solutions and I will see you next time ciao