6 State Mistakes Every Junior React Developer Makes

Hello, friends let’s talk about states and  the most common problems you may encounter.   It’s one of the most important parts  of React. And after React hooks,   it became really easy to handle states we are  just creating a state variable, its set function,   and the initial state inside useState hook.  And whenever we want to update the state,   we just use this set function and chance the  current state. It looks pretty easy but there   are some important points that we need to know. So  let’s say we have an h1 tag that shows the number.   And here, let’s create a button and whenever  we click on this button it’s gonna fire this   function and the number will be increased. Let’s  check the app on the right side. I’m clicking and   as you can see it works as we expected. But what  if I add here another button. Again it’s gonna   increase the number but this time asynchronously.  I’ll say increaseAsync. Of course, I’m not gonna   create a real async function but we can use a  setTimeout function and will increase this number   after 2 seconds. So when I click, it’s gonna  wait 2 seconds then update the state. Let’s try.   Now here, and after a while, it’s two. It looks  okay. But what if I click on this async button   and right after that click on the first button  a couple of times without waiting 2 seconds.   Let’s see what's gonna happen. I’m clicking,  Right after that here. As you can see it turned   back to 3. So what’s happening here? When  we click on this button our number was 2.   Let me take back again. Okey. So when I click,  this number is always remembered. That is because   here, when we update the state in this way, we  still refer to the old value. So basically, this   number is our reference. To solve this problem,  the only thing we should do is use a functional   update approach. So I’ll say setNumber again but  this time, instead of a value, I'm gonna pass   a function. And the argument of this function  will be the latest number we have. Let’s   say the previous number or the current number.  Whatever you say but these two are the most common   namings. So you can choose one of them. “previous”  or “current”. And I'm gonna take this number   and increase here like that. Basically, we are not  re-creating our number. We are just updating the   current value in the memory. Let’s see right now.  Increase, async, increase again a couple of times.   And as you can see, it works as we expected.  So when you update your state it’s better   to use the function version instead  of updating it directly like that.   Okey. The second common useState  problem is the initialization.   When you initialize your state, what you  are writing in useState is really important.   Let me show you what I mean.  I’m creating a user state.   And at the beginning, we don’t have any user.  It’s gonna be empty. But let’s say we are gonna   fetch a user data later and update this user. And  after updating I’m expecting a user like username,   email, and images array which includes  the profile picture and the cover picture.   Something like that. But remember we don’t  have them yet. So if I come here and say,   username is user.name. Let’s save. As  you can see there is a white screen here.   And it’s a really common problem, I saw this many  times in lama dev social media groups. People are   having trouble with this blank page issue all  the time. By the way, the group links will be   in the description below if you want to join and  ask your questions. Anyway, the problem is our   user variable is undefined. We didn’t provide any  type here. But in the html section, we are trying   to get an object property which we don’t have  yet. To solve this problem we have many options.   The first one, you can write here a condition  and say if there is a user show me this span.   In this case, only after updating the user, we’ll  be able to see its name. And the second solution   is writing here a question mark. Basically it’s a  shortcut to verifying an object or array. I mean   it’s the same thing with writing here if there  is a user show me user.name. Let’s take it back.   And the last solution is to initialize your states  with the expected type. So if it’s gonna be a   string just write here an empty string, if it’s an  array write an empty array. And in our case, it’s   gonna be an object. Right now there is no blank  page anymore. But sometimes it’s not enough to   write only an empty object here. For example, if  I write one more span, and say profile picture is   user.pictures and I’ll take the first picture in  this array. So if you look at the app again you   see that we have exactly the same problem. That is  because this time we don’t have such an array. To   prevent this, you can write here what properties  you exactly need. Like username, string, email,   string, and images, array. In this case, we won’t  have any problem. I highly recommend you to write   them like that because most probably you are gonna  forget writing a condition somewhere in the html.   So don’t forget writing your types. Okey. Right  now, I’m gonna change the initial state and I’ll   give a name, email, and images. So what I want  to do is to update the only name of this user.   To do that I’m gonna create an  input which takes a username.   And a button to update our user. And I’ll  create another state that holds an empty string.   So whenever I write here anything it’s gonna  update this input state. To do that I’ll create   an onChange event, and update the input like that.  Basically, the target of the event is this input,   and value is the string that we write here.  Okey, we have a name right now but how I’m gonna   update this user? Remember I’ll change only this  username, all other properties will be the same.   Let’s write here a click  event and call a function.   changeUser. Let’s create this function. We  already know that we shouldn’t do this by writing   user.name=input or setUser(user.name=input).  It’s not gonna work because we are not returning   a user here. Inside of the set method should  be a user object. It’s gonna assign this value   to user state directly. What I mean by that?  I’ll say console.log and user. I'll change here   and click. And as you can see  it returns directly this string   and the user is not an object anymore.  It removed name, email, and image.   You might think to write here an updating  function and write it like that. But again,   we are not returning any object. It’s gonna  return only this value. Let’s see. As you can see   still the same. So what we should do is to  update this name property while returning   the user object. You are gonna understand what I  mean better right now. I’ll say return an object.   And this object will include everything in the  current state, name: john, email:[e-mail],   and images everything will be the same. But I’ll  update only name here. it will be the input.   And right now, when I click it’ll update only  username. If you don’t know using this spread   operator let me explain quickly. Let's say we  have an object which includes name, surname,   and age. If I define another object. And it’ll  take every properties of this object. And as you   can see it's exactly the same. I’ll say take  everything but additionally add here a city.   And right now it has name surname age and  city. And also I can change any property here,   as we did in the example. let's say  take everything but change the surname.   Okey, I think you understood how it works.   And this usage is really useful especially when  you have a form and you have many inputs inside.   Let me create one. Actually, I’ll just copy  and paste. As you can see, I have 8 inputs.   And the biggest mistake you can do is to create  here useState hooks for each input. For name,   for surname, for every single one. It consumes a  lot of time and it reduces the code readability.   So what you should do is to create a  single useState which includes every   properties. And change their values using  only one function. So I’ll grab my inputs   and create a change event. OnChange handle change.  Let’s create this function. I’ll do exactly the   same thing. I’ll use the functional update,  take every properties from the previous state,   and change a specific property according to event  target. For example, if I change here it’s gonna   update only name. But how It’s gonna know which  input I'm in? For user it should write here:   name: e.target.value, for surname: surname,  e.target.value. Basically we are gonna need   their names. It’s really easy to handle that. I’ll  choose again all of these inputs. And give them   some specific names. It’s gonna be name, surname,  and others. But make sure that these names are   exactly the same names in the state object. Right  now I can use those names like that. Don’t forget   this parenthesis it’s a property name. I’ll  write a console log and check my state. And now,   doesn’t matter which inputs I’m writing in, it  directly updates my state. It’s really useful when   you want to update multiple states. But should we  use useState hook everywhere that we need a state   or states. The answer is no. Sometimes using  a useReducer hook is much better than using   a useState. Of course, there is no rule that you  should use usereducer instead of usestate or it’s   not a mistake if you use it. But in some specific  situations, useReducer is more advantageous.   For example, if you have a more complex object  that has different properties like arrays,   nested objects, and other things here it’s better  to use a reducer because when you update different   properties, it’s gonna be really messy here.  Because all elements here are not strings or   numbers like in the previous example. So  we cannot update them in one function.   We have tags, we should separate each tag and push  inside this array, or choose different categories,   increase or decrease this number, and there is  a nested image here. Actually, this example is…   okey, but can you imagine you have maybe 10, maybe  more properties here and you’ll have to use spread   operator all the time and, probably you’ll make  a lot of mistakes. So creating a useReducer and   using different actions for each changes might be  more useful here. Of course, I’m not gonna deep   dive into useReducer in this tutorial but if want  to see in the future let me know in the comments.   And the last common mistake is to derive states  incorrectly. Let me explain. As you can see we   have products state which includes id title and  quantity. And we are listing all these products   using a map here. It’s title and there is a  quantity and it includes its number and two   buttons here that we can increase or decrease this  number. As you can see we are passing the product   id, and in the function, we map through  all products and find the related product   and increase its number. You already know how  we do this. Let’s see, it works perfectly.   And here we have a select button. When we click  on this button, it fires this select function   and basically, it takes the product id and  finds the product that we want, according   to this id. And after finding, it sets a new  selected product. And we show this product here.   Everything looks nice, we can select any product  here. But the problem is happening when we try   to update product quantity. As you can see we  increase this number but the selected product is   still the same. That because the product inside  the selected state and the product inside this   array are not the same. We just created here  a new product. We are not exactly choosing it   from the array. So how we can solve this problem.  Basically, instead of storing here a new product,   I can store only its id. So when I select  any product I’m just gonna update selectedId.   Now I can write here selectedProduct. And  again we’ll find the product using its id.   Let’s try. I’ll select this product. And when I  increase this number it increases here also. And   it’s really important guys. Especially if you  are not working with a state management tool,   you’ll encounter this issue all the time. So  don’t forget, if one state affects another   state just store its id, instead of creating a new  object inside. Okay, I can give more examples but   those are the most common problems that you will  most probably have in the future. But right now   you know how to handle them. I hope you liked  it. If want to learn any other react hooks   like useEffect, useMemo, useCallback or any  others just let me know in the comments. If   you learn sth new today please like the video.  I hope I’ll see you in the next video. Goodbye.

Channel: Lama Dev

Views: 225,964

Keywords: react, react tutorial, react course, useState hook, react hooks, react usestate, react usestate issue, react update states, react usestate best practice, react usestate white screen problem, react usestate doesn’t update, react cannot read properties of undefined, learn react usestate, react usestate tutorial, react state, useState functional updating, usestate vs usereducer, react derived states

Id: Fhu5cu864ag

Length: 15min 53sec (953 seconds)

Published: Mon Jul 25 2022

Reddit Comments

[u/besthelloworld]

I can see the pretty rough graphic design mistake that is your thumbnail 🙃

[u/zephyrtr]

2 and 3 can be summarized as "use typescript"

[u/naaaaaaelvandarnus]

1 common mistake every beginner makes :

• create a video tutorial for a programming topic

[u/omnomnommies]

I just want to say thank you for posting this. I've been stuck on an issue for a couple of days and didn't even know what to google to solve the issue, and this helped me figure out what the issue is.