4 React Best Practices That Will Make You A PRO

hey guys how's it going i'm back here with another video and today i decided to bring this video where i'm going to be going over some react best practices i've made a video similar to this in the past but it's been almost two years and i feel like react changed a lot since then and um i wanted to preface this by saying that um not always best practices should be followed however what i try to condense into this list are the things that i believe that are actually very valuable for you to start doing if you're not doing and it will actually help you while you're coding your react applications and just make you overall write better code so with that in mind let's get into the video [Music] [Applause] [Music] [Applause] okay everyone so the first best practice that i really wanted to point out to you guys is basically dividing your project your react project into different components now i know a lot of you guys already know that dividing your project into components is good because of organization purposes however that's not what i'm going to be focusing in this video the reason for that is because i'm dividing your project into different components it's not only useful for making your project more organized but also it will have a direct impact in the performance of your react application now not a lot of people really know that and i believe that that's one of the reasons why this is a best practice that i really wanted to show you guys because i feel like it is something that is constantly overlooked and it is extremely important now i created this very simple example over here in order to demonstrate exactly what i'm talking about and it's basically just a simple react application that is already made right and as you can see it's pretty simple it only has two components one is the app component and another one is the child component and this child component is extremely simple it doesn't have anything inside of it the only thing that includes inside of it is um like an empty div with nothing um and a console log which basically counts the amount of renders um like the amount of times this component has rendered now this isn't the point of the video but um a little tip for you guys if you want to count and console the amount of times a component is rendering you can actually use the console.count method that comes with javascript and it will automatically do that for you so that's a little like really cool thing that you can do now on the app component as you can see over here we basically have a project which with a very simple logic and what this project does is as you can see there is a text in the screen saying simple text and there is also a button called change color and when you click on the change color button the color for the text turns red if it was black and it turns black if it was red now the way we did this is pretty simple as you can see we created a state called caller and it basically represents which color the text should be right now initially it is black and then we have our h1 tag which is our text and we just use the inline styling to define the color to be equal to whatever the value of the state is then for the button when you click on the button change color it basically just sets the color to be equal to red if the color is currently black and black if the color is not equal to black meaning that it's red so this is very simple logic but um i wanted to point out something important for you guys the child component over here has nothing to do with um this whole logic over here right imagine that this is a part of your website and this the child component over here um was a completely different part of your website which had no logical relation with whatever is happening over here so technically imagine that this state over here should only impact this part of the the website but should have no impact on the child component and technically by the looks of it it doesn't right because you don't even call the this state inside of the child component so it technically shouldn't be impacting it like whatsoever right but that's wrong as you can see over here if i inspect element and i go to the console log initially that console.account that i mentioned will console log the number one right because every time you refresh your page it should like render the component once but now every time i click on the change color it will keep re-rendering the child component so the change in the value of a state which has nothing to do with this component is causing it to re-render which is something completely not ideal because imagine if you have a lot of different components then all of those components would be basically being re-rendered for absolutely no reason and this affects the performance now the reason why this is happening is because we created this state in a component which calls the child component so every change in this state over here will trigger a rerender on this component because you're changing the state of this component so technically react has no way to know that um it won't be useful for this component specifically so the way to fix that would be dividing your project into different components based on its logic so for example one thing we can do is we can create a change color component over here and just put all the logic for changing the color inside of here so all the logic that existed in the app component we just transferred it into a change color component and just made it simply inside of here now the changes are minimal but look what happens every time i change the color right let's open the console and let's see if it will keep triggering every render now obviously the first render appears but now every time i change the state it won't be triggering a render of the child component because the state was created inside of a different component now this might seem simple and not even that useful for beginners however i would say this is important to keep in mind i would say this is a best practice that you should be taking into account because it can negatively impact the performance of your project which in my opinion should be one of your number one priorities so with that in mind this is the first best practice that i wanted to talk about in this video okay everyone so the second best practice that i want to present to you guys is using fragments to your advantage now this is kind of a beginner concept but i see a lot of people still committing the same mistake so i decided to create this simple example over here which i took from one of one of the videos that i made recently where i recreate the wordle game so if you want to check out that video you can check that out um but i'm just using the code for that and somewhere in this code you can see that we're basically asking something like this we're asking if the game is over then i want to render some components called game over but if not i want to render these two pieces of information over here these two things are different elements from html right one of them is a h1 tag same play game and the other one is a button same play game now you might ask why did you put a div around this well the reason why i did that is because react doesn't allow you to have um sibling elements like this when you are either returning a function or just returning directly from a conditional statement like this you need to have something around these two things over here now what i had before was a diff and you might ask okay but not everything is wrapped around something right well technically it is right everything you put inside of the the first div when you return in your component is um is siblings of each other but because there is a div wrapping everything around now you can either put a div like i did over here to make both of them go together or you could use what is known as a fragment in react and a fragment is basically like a div or any other html element but there's no text inside of it so it's just like an empty um tag like this right an empty element now the reason why you you it is preferable for you to use a fragment in situations like this is because the div was not necessary right we just used it um so that we could put both of these elements one next to each other in this specific piece of our code now the advantage of using a fragment is that it doesn't create an extra node in your dom so in your actual dom which for for those who don't know it's the document object model your ui the like the whole html of your page you're not creating an extra node in it to sustain that div with this is just a syntax sugar to make it work for us and um creating an extra node probably won't have that much of an impact however it will just make your your dom heavier right and there's no reason for it since you can just put something like this not to mention you also can have some css implications if you add a div because every html element comes with some preset css so overall i would just say putting a tag like this a fragment like this would be a better option okay everyone so the third thing i want to talk about is the relation between states and objects and what i mean by that is um there's a lot of difficulties in the beginning uh when you're learning react uh in relation to when should you create a state which is an object containing various fields or separate those fields into different states this is a doubt i see a lot of people having and i personally had it for a very long time until i took the time to actually research about it and that's what i want to explain in this video so you can see there is certain situations where you might encounter this issue one of them is the following so imagine you have a form right in your website and it has a bunch of inputs uh representing a user right now there's three inputs there's the name the age and the email so there's two different ways of getting that information and putting it into a state the first one is by creating a like a state called user and it being an object containing a name an age and an email and then when you go to the inputs for each specific input for example this one is for the name you just set the user state to be equal to um the same like all remain the same for all of the other inputs but for all the other fields but the name field where you just set the value of the input to be equal to that right so technically uh what i'm saying here is that you're just changing the name field to be equal to this input and then you do the same thing for the h field for the age input and the same thing for the email field for the email input now the the purpose of this is to keep track of what the user is typing on this form and storing it into a state which is an object called user now as i mentioned there is another way of doing this the other way is separating the fields into three different states as you can see over here we have a state called name one called age and one called email and now when we go to the inputs instead of saying set user and changing the name field we just say set name and set it equal to with the value of the input and we do the same for the age and the same for the email now what i wanted to point out is which one is more correct right which one is the best practice so the bottom line is that it depends right so um i'm gonna call react on on the actual react team for this one uh basically it says that they recommend to split the states into like a state into multiple state variables based on which values tend to change together so in this case over here it is very likely that um the values for name age and email will keep changing together because um this is a form right so from my understanding a situation like this over here would actually not be completely advisable because whenever we made it make a change to the name the the name field for example then the age field would be reevaluated not just the age field but the state as a whole so we would be impacting the age value um or just reevaluating the age value even when we're making a change to the name or the email now is that a big problem well it is recommended against by the react team however it is not that big of an issue right with everything in programming there's not a straight answer you need to evaluate the the benefits and the negatives so in this case the benefits of just separating into each individual state like this is performance enhancement and that is pointed out by the react team however the difficulty is that if you have many components and it's a big project you might expect that it will become kind of clustered and you might be it might be hard to maintain because of the amount of different states that you're creating now this depends on you um i've built bigger projects in the past and what i usually do is this over here and i do find it easier to do it uh in a single object however i do think that the performance like benefits outweigh the cost so i would in my opinion recommend doing it this way so the last thing i really want to talk about is related to type checking in your code so um there's two different ways for you to to check the types of your variables in react um just in javascript as well as a whole the main way is by actually not using javascript and using typescript but i could come here and recommend to you guys that you just use typescript but i know that a lot of people won't because it is technically a different language although it's extremely similar to javascript um you do have to to learn a lot of stuff so um i will not say that i'll say that in every single situation you should be checking the types at least of your props and you don't need typescript for that you can actually use something that is built into react called prop types and what i mean by that well i came up with this example over here where we have this little project right where we have a component called child and this component passes in a couple props as you can see over here and there's four different props but they are of different types one is a string um the other is a number another one is is a string as well and the final one is a boolean so we need to find a way to prevent that we accidentally pass a value to this props with a different type than what it's supposed to be so for example we if we pass the number over here it shouldn't be allowed it should log us an error so that we are aware and it's easier for us to debug later on when we have a lot of different components and we're working in a react project that is bigger than the one i'm showcasing to you guys and the way we do this is we we go to the component where we we have we accept the props such as a child one and we basically define the prop types and prop types as i mentioned is something from react it already comes with it you don't need to install it i have a video in it you can click on the card up here if you want to see it i go over exactly what prep ties are but i'll just give a very clean like really quick explanation of what it is basically you grab the component which is accepting the props you give it um some prop types and then you just set it equal to and you define the field for every single um prop that you're receiving so for example name i'm setting it to be equal to a string type from the prop types library age is a number email is a string and is married is woo there's a lot of different ones you can choose like i'll click over here i could put for example i can just write let me just think of one um array of you can define arrays for example you can say it's an array of numbers you can say a lot of different stuff and this will basically just as i mentioned prevent you from passing um like different types like the wrong type for a prop now why is this important it's not something that will make your app run faster or your user experience be better to some extent um it's more about you developing right when you're coding you need to make sure you you set yourself up for success prevent the most prevent you from spending hours debugging something that could have easily been solved if you just did something like this if you accidentally have an error or your project is not working well um it might be because you're passing the wrong type to the wrong prop so um having something like this is a layer to prevent this from happening i'll show you how this will actually help us uh how this will notify us so for example uh if i came over here and i passed um an age that is a string right um if i open up the project and i open the console log you'll see that the console will now give us an error saying exactly what the issue is now it's just a console log it's a warning but it already gives us some sort of notification for us to know where the problem is so we can fix it right and if i re undo this and i make this into a number again you'll see that the error isn't logged anymore because now we're passing the correct types so this is it for prop types um i really hope you guys enjoyed this video if you enjoyed it please leave a like down below and comment what you want to see next i actually decided to double the amount of videos i'm going to be posting um although it's going to be a lot of work i realized that i need to do this in order to help the channel grow so um i'll do as much as i can i'll post twice a week which is something i wasn't doing and i i really need video ideas guys like just leave some video ideas on the comments if you're interested um i'll try to make as much as i can um because i'm also a university student so it's always pretty hard for me and it's also the my final season right now so i'll start studying for my finals and i need to pass my courses but anyways if you enjoyed the video please like the below and comment what you want to see next subscribe because i'm going to be posting twice a week and i would massively appreciate it and i see you guys next time [Music] [Applause] [Music] [Applause] [Music] you

Channel: PedroTech

Views: 144,783

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react best practices, react best practices 2022, react js best practices, react js beginner, better react js, how to react js, web developer, web development

Id: 5r4LlVAFrd0

Length: 18min 12sec (1092 seconds)

Published: Tue Mar 29 2022