Behind setState() Presented By Daniel Lovell

I really wish that you hadn't been able to go first cuz that's my fault I can blame you for everything okay so my name's Daniel of the co-organizer here I actually work with Tyler and Brad at that mountain I work at the Phoenix campus and you have to unshare your screen and then I can find if I have to unshare it so how does this thing work underneath the glass is right over the tonneau is the same oh yeah there we go or off the side of my glasses no I think I'll just do it this way they don't care about how we looked in it right makes you guys more comfortable if we don't look comfortable right is that how it works Amy that make you more that's not going to work but I think the state will stick alright let's see if I can assure my screen I did it work we're afraid to turn my head good things gonna fall off okay so the first thing I'm gonna go through tonight I'm gonna make that go in okay the first thing I'm going to go through is I'm setting like a couple of smaller things this first thing is the bigger thing I went to a react fundamentals training with Michael Jackson from reacts training yes react training is the name of this company if you don't know who Michael Jackson is it is not the Michael Jackson you're thinking you know but yeah he's a pretty lucky guy to have such an awesome name so I was at this fundamentals training and he gets up and starts show and react and having some experience with react I was thinking yeah that's not react and he kind of just started doing some stuff to conceptually show a little bit of what react kind of does behind the scenes not behind the scenes but like because it actually does stuff a little differently but it's but it's a conceptually right to get a grasp of it so I kind of took that cue of him like doing react without react and I just built a little bit on it and so that's what I'm going to show you first I just made this little like clicker have you guys ever seen like cookie clicker I don't know anybody seen cookie clicker if you haven't seen cookie clicker don't go there don't show your kids for sure because they'll just it's a game where all you do is click right and you click on the cookie and you get points and then you can buy like like features like your clicks become more powerful like each click is worth more when you buy these other features anyways this is my version of the cookie clicker you guys see that it's fun you guys have fun watching it probably not as quite as much fun as I have clicking it so that's what we're going to look at the code for and we're going to kind of go from the old not the old way the non react way of like the traditional way of manipulating the DOM and then we'll move it into this kind of react no react way of have a reactive way of doing things and then I'll show you I won't probably put it in a class and just make it a very accurate way so this this is the first way we're going to look at it you guys can see this okay do I need to bump it up at all yeah okay so basically I'm importing chief query I forgot I was doing jQuery on this one so it's not vanilla JavaScript but you can do it in a very similar way using vanilla JavaScript and I'm finding the stage one it will lose a stage two in love it you can see my HTML that prepopulates the Dom with its initial state okay with with the stuff that's gonna show up initially that's what we did you know when you when you refresh it it starts with zero this is just the initial State blah blah blah HTML stuff then I put in just a small script in here and I find the the element that I need and then I just changed the text content on the click because I have like an event listener I'm not going to spend too much time on this stuff if you need to you know go through and freshen up on some of this stuff you can reach out to me and I'll give you all the files and you come back and understand it a little bit better at this section but it's basically super simple I've got to be event right here when I click on the button it runs handle click which just takes the element adds one to it right pretty simple now the the what's happening here is I'm actually manipulating the Dom directly I'm getting the element directly from the Dom that's what this does and then I'm also adding some event listeners directly to the Dom and and then once the event listener happens like this element right here is an element on the doll okay it's just taking it and adding something to it you can it reads it the text content allows us to read the zero that's there and then update it right what if we could figure out a way to make instead of just this direct thing because this is this doesn't show you the pain of this you start having a million buttons all over your page and they're all like crossing over into different Dom elements and you're trying to track what's updating what you know things like Gmail for instance get incredibly like near impossible to create these really robust web apps it's just really difficult so one of the patterns that we could do is we could take this state you know this this is zero or know how that zero this is zero that we start out with see how it's like actually in the HTML what if we took this this zero because because it's the only thing that's really changing if we put it in someplace and we called it state and then we just had the HTML tied to whatever value that is so the HTML doesn't really care what the value is I should say the Dom doesn't care what the value is it's just tied to whatever it is so if it's a 0 it displays a 0 if it's a 2 it displays it to okay and then instead of manipulating the Dom directly and changing the 0 directly what if we just changed the state right so now it's kind of this new pattern while different patterns that I mean idea isn't to change the Dom the idea is to change the state and then when we change the state after we change the state we just say to the Dom rear end everything okay just like boom just change and whatever state is it will automatically be updated in the dump okay so in order to do that I get it inside JavaScript file tanks so I took that you remember the the state of zero that's the first thing that happened I took it out of the HTML I just have an object that keeps track of different we can palasa different state in here right I just such called state I have a function here that is I'm calling render and it it is what takes the HTML and ties it to the state so if you look up here this is just a template literal so it's a string that that is dependent on whatever I have it state so every time I run render it's just going to take if I open up the the index right here it's just gonna take this div which has an ID of root and it's gonna replace everything inside of that div with what I have with what I have right here on this on this inner HTML so you can see I have one place where I am well I guess two places but like inside the render is the only place that I'm actually touching the Dom and as far as like the display of the Dom I'm only touching it in this one place which is route and I'm just replacing everything that's inside of it okay so I do have to have some type of mechanism that can handle the click and so I need to make sure that I'm adding my event listener each time to this button because when I rewrite that button it's gonna delete the event listener and I need to make sure that it the new button has an event listener because I want that event listener to just kind of hang around matter what state it's in and then I could I just run render once right this is the only thing that this file is actually doing is is it just rendering it once it runs this render function and so it fills this initial Dom based on 0 ok and then the event listener itself is just handle clinic right and all I'm doing I have a function in here called set state and what it's doing is it's taking a state and it's what it does is it takes the current state and then it has one to it and replaces what's there okay and you can see that happening down here I have a set state so and this set state takes the new state and it merges the new state into state if you know how object Auto sign works it the first argument is just what the new state is going to be or it takes the object in the first argument and then it merges the following arguments into it so if if I have a count in the new state it's going to replace any counts there in state ok so and I'm kind of going around about this I was pregnant where since opposed building this on the fly but I didn't want to take the time to do that right now there's a lot of moving parts here but essentially it's back to that triangle where we're not manipulating the Dom directly instead we have the Dom tied to a an object and then we just change the object and rerender everything change the object rerender everything so so react has these functions so there's a reason why I called it render and there's a reason why I called it set state is because we have to actually has these methods that that it uses to basically do this exact same thing I came down here sorry I started talking about set state and then I didn't go on to the render when the set state is called it does those two things I was talking about it updates the state and then it renders the Dom based on the new State updates renders updates renders every single time that's all set state does so now we can go into this and it's doing the same exact thing here in fact I don't remember which one I was showing you first but they do it exactly like the result is exactly the same it's just the one is being manipulated directly and one is manipulating state and then rerender e based on the state so the whole time point of this was for me to kind of get an idea of like how react house that state works and react and so I started playing with it I built this and now I feel like I have a better understanding of how set state works and yeah conceptually right there's more to it set state is asynchronous it's not a synchronous here there's a whole reconciliation process that react goes through to determine what parts of the Dom it's going to what parts of the virtual mom have been updated so that it can update the actual bomb there's like more to it right I'm not doing everything react does but as far as that state is concerned conceptually this is what it does any questions about that II don't want to do this I'm given I leave it up to you guys Sickler question yeah so the first example which is with the jQuery yeah that means like every time your clay we load the page know every time I click sorry just like add that luckily every time I click on the on this button right here which represents this button right here it's gonna run a handle click which directly manipulates the Dom I think it's the element from the Dom updates it and puts it back in the doll that's what this is doing right here okay basically nning react is rear-end during the entire section of the Dom that react has control over but it does it in its virtual Dom so it's not rendering the whole entire Dom its rear entering its virtual Dom and then it compares it to the previous Dom and that's how it decides that's called reconciliation it decided to change what changes there were where do I need to update them and so that makes it very fast it's actually updating the entire DOM is very slow so this do not put what I'm doing right here into production all right don't don't follow this pattern unless unless you have a funky little website but it doesn't matter what you do like this is fine you would never tell that this is not like production worthy because I'm running it locally it does one simple thing if I have a thousand people trying to run this it's gonna have you know problems probably maybe not even a dozen it'd be running individually.i makes personals computers yeah there you go wouldn't matter so in this situation it wouldn't matter yeah good point there's just not enough happening for this to really matter but react is is optimized from by things like Facebook you know where it's like got a million things happening on the page of the same thing so I'm going to leave it up to you I probably have time to get through everything would you like to see this converted into a react component would you like to see how this translates into actual rec this is pretty similar to actually what react looks like would you rather learn about the dangers of updating state with previous state or with the current state like I'm doing here so you see how I do like state count +1 in there that can be dangerous in react it's not dangerous of my thing but reactant reacts that state is asynchronous we can talk about that or we can talk about keys and mapping over arrays and the dangers of using the index of the array as fiction the fun would you rather do okay all right we can do that I'm going to open up this other project you think only to the top I should probably see if anybody have a problem angry you agree with that okay so let's look at a project that I have it's just a simple project let me show you what it does before I start going through the code is that the one yes so this is really simple simple and silly it's like useless right it's kind of like it's a new app so I add that I have this well actually let's do this let's do first second third okay and do you see how I'm adding them into the top okay and I'm not adding them to the bottom so the the actual order is changing of the actual so so in this end in this array this first item used to be at index zero now it's at index two okay can you see that okay now I can go through and just change the color of these things so I'll change this one to read this one in yellow and this one of blue okay and what happens when I delete this second everything works right everything works as it should I'm gonna come into my code I'm gonna break it okay so this is the part that's tricky right here so I have this array right this does state that items and I'm mapping over those items and I'm using the key previously I was using the key item that IV but what if we use the index or actually what if we don't have it in here at all let's talk about that first okay you guys know what happens just in a yucky stuff no matter what age so what's happening is what I'm going to inspect the idea is you get this error okay so it's not even showing up with like first or second or anything in there right and I feel that one yellow I do that one blue let's try a third one to see how to end it through it on the bottom but I'm putting these in at the top okay so it's like it's totally like me wacky like it's not preserving what I want it to do so what if weapons if I delete this red one oh that didn't work it's this error that says it's it's it can produce weird things if you don't worry about that the order like you know I'm adding to the to the top and so now the index 0 now became the index 1 and then becomes the index 2 when you start doing that stuff and the order of the map gets out of order then weird things start happening and this is the error that says hey you've got a problem you need you can't each child in an array so you manage remember dot map returns an array ok so inside of that array there is it's an array of JSX elements ok and so what we have to do is we have to make sure that inside of the array each of these items have a key so the react can keep track of the order of each thing so that if it goes out of order it still knows like which one was which okay so we saw like where things were happening so if we come back in here and we add a key in here to key equals a lot of times we'll use eye right so we take like we take the item index that's produced by math and we just throw a key equals eye in there right that's like the shortcut way of handling it but the problem is is that it needs to live outside of the of the map so let me actually I'm gonna come back in here this stills shouldn't work okay so we're back over here ready and we do first second third it's it's reordering everything I have yellow red yellow blue but remember this time I'm using the index as the key so you can think like look there's no hair do you see that see how there's no hair now because I'm using a key with a unique value right but then as soon as I like delete this red this yellow one is that what was supposed to happen yeah first was blue right so it totally lost the internal state of the component because it thinks that this the second one is or the one that says like it it thinks that the second item in the array was the one that was yellow like it's saying whatever index yeah so if I so we don't run into that problem if I come up here and I change the order that I that I add things in so you can see like I'm adding the item right here first and then I add the rest of the items in if I add the rest if I put it in the new state if I if I if I put all of the items in first and then add the new item to the bottom I won't run into this problem because I'm not changing the order of the array right but it's tricky because you kind of think hey there's no error because I'm using index and everything works because I'm not changing the order but then all of a sudden as soon as you start messing with deletes have put things in different orders and stuff everything starts you start losing the internal state because because react go through and figure how every single change that could have happened it optimizes it a usable it uses heuristics to or which is like a rule of thumb it's like usually this is going to happen right so we're gonna pretend we're going to assume that this is what's happening it doesn't actually programmatically go through and figure out what's happening so and that's how it does it fast that's how it does the reconciliation really fast so the way to fix it is to never use I write for your key okay so we don't want to use I for the key what we want to do is we need to end so in the in the wild almost always if you're working with real data it's probably going to be coming from a database somewhere or something and you're going to have an ID that is tied to that specific element outside of the map the index is only tied to that element inside of the map as soon as you create a new element it may or may not be tied to that index as soon as you create a new soon as it runs map again it's going to [Applause]

Channel: Phoenix ReactJS

Views: 742

Keywords:

Id: GMfDa79iZFs

Length: 50min 59sec (3059 seconds)

Published: Wed Jan 10 2018