Fun with React Hooks - Michael Jackson and Ryan Florence

welcome thank you all for coming it's a lot of fun Michael and I have been we work for react training right now we're on a crazy spring tour we're hitting up ten cities in five weeks so this is week two of our tour if you want to catch us elsewhere you know come to come to Phoenix this one this one could use some some help in the sales department I think we're at like 18 tickets for that one [Music] yeah Denver can also use a couple of you know anyway that's not why you're here [Music] react hooks are awesome who's using them who's rewriting their code to use them did you just see today that Facebook announced a new UI and Zuckerberg sup there and he's like we rewrote the UI do you remember what Dan said at react cough Dan said don't rewrite your app and hooks and then what did I say when I got up right after him I said I think you should and then what did facebook do so who are you gonna listen to from now on Dan or Ryan thank you hooks are they're really exciting they bring a level of composition that we haven't had in in react well we kind of did what makes sense but mix-ins kind of had some problems and and every now and then people will be talking about hooks on Twitter or in an article or how to meet up and there's there's this oh there's this uh what's the word I'm looking for I'm being recorded hesitation there's some hesitation to use hooks could you look at the old component right you look at a class component and then someone rewrites it into hooks and I say look and you're like it's not that different and it's super magic right it's a little bit a little bit surprising how it can even work and you start wondering like so is react with like babble like doing weird stuff like pretending like your JavaScript is a template and compiling it to something else how does all this stuff work so what we want to do tonight is number one we want to demystify hooks if it feels like it's a little bit too much magic or if maybe it's not too much magic but it's always nice to not think your code is magic right when you quit thinking code is magic you realize how it works or you can figure out how it works and that's always easier hey hello yeah man just died I guess go home and it's easier to debug when you understand how something works I can't tell you how many times we're sitting in a workshop and somebody is a they've got some sort of issue they've got a bug or just read text in the console and they just don't trust like JavaScript generally right I'm trying to add these two numbers I'm getting this error and we have a hard time reading the errors sometimes like the error tells you exactly what you need to do sometimes but we don't we don't trust JavaScript and then we don't trust the browser and then we don't trust Babel and then we don't trust react so let's go all the way up to the top and let's say well let's figure out if we can actually trust react first and then later you can work on trusting the rest of the stack but I want to start here with reactant and kind of demystify how these hooks work so this is a react app and a react meetup so naturally we made a counter because that's what react is for [Music] see if you click this when it's at one you can't okay so that's a little bit better than the Redux counters that you've seen a little bit all right so we said minutes set minutes you state five so I've got five minutes in there initially let's reload this and we'll see it then I've got error now I've got set error and I start with null then you can see here when we handle ad that's sitting on the the button down here the button that says FA plus on there that's actually I really actually we could do it right here we need an aria-label on here that says add why because when we turn on our screen reader we want it to read it so anyway that handle ad is right there and then we will say if minutes or less than nine we're going to go ahead and increment the minutes otherwise we're gonna set an area you know when I very first used hooks it didn't even occur to me how strange this is that I call you State on line nine and it returns to me the minutes then I call you state on line ten and it returns to me the error like have you ever done something like add two and three and one time it gives you five the next time it's like cow I'm getting minutes and then I'm getting error I just I was just so excited about the composition that we get with react that uh or with hooks the didn't occur to me to think about this but that is weird so I'll be we're gonna make I'm gonna make our own version of react hooks to demystify how they work and the reason being is that I really I like a lot of use raised your hands using hooks and I'm feeling left out because I'm using enzyme a few of you know what that joke is about - yeah cuts too deep or does it work now did they fix it no still doesn't work yeah well neither Dan Nora I told you these enzyme so you should have listened to both of us what's that that's the doctor did that's right so Dan did tell you news enzyme for a little while you're gonna walk out of here he's an arrogant jerk I don't know why I'm feeling so cheeky today though okay so I'm using enzyme so I can't use hooks yet so I'm gonna make my own version of react hooks yeah oh oh my winters mad we don't have a you state let's make our own use state and let's check out the signature here we pass in what are we pass in our default value and then we return this array your computer nerds are like it's a tuple so we're gonna make our tuple here sounds like a little kid like potty training and then what else does our tuple return number two anyway so set minutes so we're gonna return a function that's like set value so I'm going to need some sort of function here call it set value and then we got our little tuple and we can return it let us think back Sarah can we do that can you oh man in English I just kind of want to bask in this for a minute that really okay well yeah I mean this is going into every documentation that I write and from now on I'm really happy about this I was about to rename it to state but I'm keeping this tuple to play all right so here okay my app didn't blow up it doesn't work anymore but it didn't blow up it's one of those commits that's like refactored and cleaned up the code we merge to pull requests on our workshop material thinking uh okay cool thanks guy and then we showed up here this morning and a bunch of things were broken Rocco so anyway review those pull requests a little bit better alright so cool so when I when I click this set or when I click this button and I call handle ad it's calling set minutes right there boom set minutes of passes in a new value so right here the set value thing is going to get the new value but I've got to come around somewhere and assign something right I've got I've got to keep track of a value and I've got to change it here and then what else happens after you call a set value function yeah react is gonna re render okay so I need to assign something and then I need to rerender inside of this function I mean you fall value equals new value or something I believe I don't know does that what the heck is that going to do we'd call you state on the first render get five call it again but that's just inside of this function closure right it has nothing to do with the next render or anything and inside these functions these values like JavaScript garbage collection will it'll as soon as this function is done as soon as you state is done and I didn't send this array off somewhere and I didn't send this function off somewhere it just garbage collects all of this stuff it returns the thing and it's like okay I'm done I'm out of here so if I if I'm assigning this like has has nothing to do with anything going on here so I've got to keep track of this stuff somewhere else so I'm going to make some two plays now here that'll call them states will have all of our all of our states out here and now I want to I want to keep track of my to play inside of that state so I need to do something like you know when I get one of these things I need to push it into into there oh man and the autocomplete even works learning so much tonight so I'm gonna push that thing in there and then when we reassign some so now I know how to assign something I can be like okay states I gotta somehow find it so I need some sort of like ID or something right - I stored it after the first render we're gonna come around and re-render so I've got a and when we try to sign I've got to go find it so I need an ID so I'm gonna say let's call this a call ID and let's keep track of how many calls we have done to use State I'm gonna say plus plus call ID era calls so the plus plus in front says to increment it just like on the back end but if you do it on the front end then it also returns to the value so we're gonna get a call ID then down here instead of just pushing we're going to make an assignment that way and so now I can find it when we click the button and then the first item in that array is my actual value and then I can assign it to my new value with me so far click the button go find the thing assign the value now I got to re-render this render with crappy hooks let's uh let's make that work so here's our function render with crappy hook actually know what let's get all of our our hook code all the way down there okay I need to call this right away to initially okay so our first render comes around and we increment call ID to zero and then we create our little tuple and then we assigned it into the array so now we've got this thing inside of here like that right we've got our first one [Applause] so right here we call you state with five so we're going to have this array where this is going to say five and then this is going to be a function all right so we made that assignment right here and then we threw it into the arrays into the states then we come around and we do this one with the error and so we're going to increment calls from negative one sorry from zero because that's where right now and we're gonna go to one and so then we're gonna have something like this inside of there looking good all right let's just let's see how we're doing and let's um every time we use state let's console.log actually know what down here in our render of crappy hooks that's console.log all of our states did you see that error do not use marquee elements as they can create visual accessibility issues and are deprecated come on if I'm using a marquee I'm well aware of what's going on [Music] okay cyclic plus what did I not get that in the first place seems like I should have right yeah let's click the button anyway oh yes it is Thanks so there it is it's empty and now when we click plus let's go and look at the code let's think about what happened the first render came around we assigned our two tuples into here so should have one and two are minutes in our error and then we clicked the plus button so we called set value so we should have updated our 5 to a 6 and then we rerender with these things so if I open it up here's what it looked like Oh what do we have going on here we got a whole bunch of stuff right we've got way too many of those way too many of those we've got four of them why do we have four of these we rendered twice we called you state how many times called it twice per render first render comes around and we've sent you know what maybe console logging our states right here would be better that would definitely be better let's let's visualize it right there okay so the first time we render we made those assignments at 0 we put a 5 and then the set function and then at 1 we put null so that's our minutes that's our air I click the button doink and now we've got 4 so what's going on call ID is getting incremented still right so it was 0 and then went to 1 then went to 2 and then we rerender it and went to 3 and 4 so we need to reset it when we render with our crappy hooks oh man calls equals negative one come in here we find that we rerender mmm so we are still creating we're just we're just making brand new ones every time so if we come around on the second render we should say hey wait a sec if we already established this state let's just return it so our first render we bring in the default value we create the set value function and then we store it in two states our second render we come around and we say a we're already tracking this state so we don't need to create a brand new one we can just return the one that's already sitting there so we've already got it right here all right there they are so we just need to return the one that's sitting there for us all right let's save this crappy hooks this help hose that yeah so now I can still use insight so that's all it is that's all that's going on I mean of course there is ten times a hundred times probably this amount of code to really make it work because its components mount and unmount you actually need to keep track of the call count per component right it's not just this global thing if the component comes in and use the state and then goes out that's another thing we're never actually cleaning up like we're signing into this cache of states but we're never removing it because we don't we don't have knowledge of reacts rendering and knowing that it's mounting your own mounting components and knowing to expire those caches so we can't actually make like usable looks this way but as a mental model this is this is exactly how it works that's why we have a couple of those rules of hooks where you can't do things like well if the minutes are less than ten then let's use a state here right we're gonna get we're gonna get an error in this case sorry not a real error but we're gonna get a yes link error says hey you state is called conditionally react to expose be called in the exact same order in every component render exact same those words mean the exact same thing as each other so that's why we got to keep that's why we've got to keep that stuff unconditionally rendered because react is tracking them by the call count inside of your component so if you've ever wondered like oh why did they make me do that that's it they track it by when it was called don't miss anything Thanks [Applause] hi everybody my name is Michael it's awesome moving back to Boston beautiful place happy to be here so Ryan talked a few times about you mention the word composability right and and I wanted to talk a little bit more about what that means because honestly it's a it's a word that I really didn't even get until very recently myself and it's a word that I hear all the time in conversation with other developers and and sometimes I like having a conversation with somebody and they're using the word and I'm using the word and I'm like right so I wanted to kind of see if we could if we could at least all these just here in this room if we could come agreed on what that means and and kind of show how it works in react movie stuffs because I think it's their number one feature honestly win though with Dan for showed me hooks we wanted to get like some early feedback and then and then you showed me how hooks compose and then I was like that's what that's what my wife really want that's how a really really excited by so so Ryan's been showing us to use statehood right deep behind the scenes we uh we've recreated that one from scratch I'm going to talk about another book called use a fact okay so let's say it so I want to kind of go behind the scenes a little bit and think about what do we use effect for what other what are the side effects that we're having in our app Ken so I'm actually going to look at this little message counter right here okay this thing right here is 20 out of 200 sorry that's Inc you know the length of the message that I type here okay uh and you know we react does that for us right so here's the here's the component that I'm rendering this form here and you see the here on this text area I've got an on change handler get it as the text changes I'm just setting the message and then and then I'm going and putting the message length inside the span right here right and we kind of take for granted that we code like this and then react makes this stuff happen on the page right let's say for example that that we wanted to try and implement this manually okay so we just have a span here and it's not it's not really doing anything for us right now right it doesn't have any text in it at home and what we're going to try and do is we're going to try to keep that span up to date as the message changes instead what I'm going to say is first of all I'm gonna need a ref to it message so there's another book called use ref conveniently CLA's get a message length read the word ref comes from we want to get a reference to something probably a dominant okay so most of the time goes to your reps are references to actual dominoes right these aren't actual Dom nodes these are just descriptions of what we wanna lead on and then as soon as we act creates them if we can arrest that it'll give us a reference to that time right so we have an object reference so now what I could say is look I can see every time the message changes that's one time when I know that we're going to need to update that count right so I can just go to that can I go to that node here it is message length wrath dot current and I could say your text content is going to be the length of the message so in that dock target so I'm just trying to identify all the places where that where the number needs to change and then doing it myself manually okay so we can see we've got one so so as I'm handling these changing minutes check it out who needs react right like we could just do we do all the all the manipulations that we need on the document we could just do them ourselves right we could just do them imperative ly ourselves why do we why do we need react this is how we you stood think about writing apps before react and if you haven't done the react this might still be how do you think about writing in your like what other way is there when the keyboard even comes in the message link changes don't update the number right like what other way is there to think about this problem so you might notice that I've actually got like a little drop-down menu up here and let's say I'm just gonna plug this one in feel like I can't tell I know there's small weights all right so you'll notice as I as I'm selecting different things you'll notice as I'm selecting different things here the count doesn't change right the only event that we're listening for right now is change events in the text area right but that's not the only time the message changes right the message changes when you select something from the drop-down as well if you think we can handle that event as well let's see let's go down here okay so when here I've got I've got the drop you know on the drop down here's where I'm going to set the message so maybe I can manually do the work here as well so what was it basically I'm just a little copy on that coat yank that put it there okay except this time exciting that target on value all right so now selecting from here works that's good selecting from the drop-down works that's good that's right I think we're good except for that initial page look how we can ignore that as soon as they start packing they'll be fine right so when we're thinking in events this is time what we have to do we have to think about okay what are all the times when this thing changes and when it does change then that's what we need to go in and execute the change right ourselves that's what we need to to make the time update to update the document okay what if instead of thinking events we thought about in terms of state right Rena gives us this cool little book called use of that and if you're if you've done and react at all you'll be used to thinking in terms of state but you might not have used use effects book before in so all I'm gonna do now is use effect is short for side effect if if you're a functional programmer right the side effects are the things that you do that are other other than the things that the main program is doing okay so in spirit function is adding two numbers the side effect would be you know printing into the console or something like that right so in this case react is actually perfectly able to well let's let's just move our side effect in here it's just that's only regular bit from here I'm going to remove it from both from both areas book joining the important news effect oh geez and message so what I'm gonna say is whatever my message changes going update the link oh one thing we notice right off the bat is it's already so in this case we're saying we want to have a side effect whenever the message changes I want you to run this side effect okay you'll notice that it's it's working even without the message that case of the default the default behavior abuse effect is always running always run on every render run the side effect you can think about that it's kind of like this synchronizer right it's saying let's synchronize something to something to the document okay in this case though we don't mean it right like we just went through that big exercise when all we really needed was message not length here so then what kind of stuff is it hip for you know what are we gonna have what kind of stuff with you so if you think about it these are actually the kinds of side effects that you're having all the time in your app things like logging things like fetching data things like timers you know timeouts and intervals you know any any other sorts of imperative work you can say like syncing your you know d3 chart right this is this is other stuff that's going on okay other sorts of imperative work that's that's going on in here and so what I'm gonna do is I'm actually going to pull up really quickly I'm gonna pull up another example I'm gonna do this one you just say start number five so I'm just kind of cherry picking from some of the material that we've done here okay so so let's look at this component replic so this component is responsible for rendering a user avatar component okay so I've got a user avatar at one place I've got it here okay so instead of instead of using it for us synchronizing to the dawn let's uh let's use it to go ahead and get some get some doubt okay and what we're going to do is we're going to do both of these things here okay and we need these two things in order to actually render render our document here so what I'm going to do is I'm going to say okay let's have a side effect let's have an effect I'm gonna say look remember the user ID changes that's what we actually need to go and do a fetch so I've got a function here called fetch user so I'm going to take this one here and say fetch the user with the UID then when you get the user object back set the user right so so basically what this is saying is on the initial render and any time the user ID changes go and fetch the user with that user ID and 7 in state right so that we have that user object and now the user avatar actually pops it okay do you remember how we used to do this or how may many of us are probably still doing it in our act how would you have a component that fetches data and then shares that data with you yeah you could use the lifecycle methods right there are a couple of couple of popular methods for doing this maybe maybe we have like any user class here or something right and I would just extend my rack component and start I would have some state right and in my life cycle method my component didn't out I would say something like this not fetch right and this is going to kick off the the first batch so let's have a fetch method up here and let's say fetch user with this dot from UAE let's have a UID profit gain and then we use her back and then we can this top set stay with the user okay so now that our user composite has like the ability to actually go out and do the fetch how is it how is it going to share that information how can we how can we render with that data down down here any ideas for how we can share that state there are two patterns there's a higher our component pattern or the one that I kind of refer to use is our render prop okay so what if we are touching my Redner even what if we have function called render down here and look what I can do is I can use a render prop called we'll just call it children then we'll pass this not state values okay okay so what am I doing here all I've to do is I'm trying to trying to duplicate the functionality that we had with the hook okay that's all I'm trying to do okay so I'm gonna comment kana this one out just to sort of we don't compare with current happiness man so let's say let's say that instead of instead of having the stake here we'll say we're going to render a user now learning we actually go and we render this thing so let's say here that we're going to render hate user with the UID equals the new idea that we got whose time and then out comes the user like a render something this makes sense how many people have seen this pattern before the regular crop pattern before any bread three uncocks you probably read about this pattern it's a holographic EULA I'm going to use Apollo as a query component that kind of works like this right putting in your query it goes and fetches some data gives you the data on the render prop right so you can render something let's see if this works where's the user [Music] here here so actually what we're gonna have to do is we have to take a bunch of this code probably all of this code and okay so so all of our regular logic now belongs we're gonna turn okay a lot of stuff that just moved around but hey I got a user right so this is a component that does more or less the same thing as what this affected we had to kind of move some things around right where did we have to move things well since we didn't know the user until we got me here in the app and the render properly and move all that logic down that read their function right no big deal it was just a copy of the face but now we've got a bunch of lifecycle let me ask you is this is this component here is this resilient to the UID changing what if it gets a new UI e proper does that have to do update right so let's add some more code let's say I'm component did update pre prompts and what will say this you're familiar with this dance if this stock drops to ID does not equal the three drops dot UID it's been your partner round and round this top fence right you all know if you all know that that that that pad okay all right so we made it a little more little more resilient now what happens if we're mid-flight and and the fetch comes back so what happens if I'm like going very quickly between these two things memory league right because this is an asynchronous operation right here's the start and here's the end and in between this time that was an unmapped right and so what you're trying to do is you're trying to set state on a component that's gone in so reacts as a you can't set state on that mountain component right so we need some sort of way to like cancel just either here I know maybe we can say something like this is mounted so anyway that let's how about how about that come up with singing come upon it well no no but you do something like this before yeah fine I Institute it's about that equals false and and so what we want actually what's that listen what's the saying the opposite this is unmounted equals true and then we can say if bang this dot is melted boolean logic is not my strong suit that correct okay so the only time who said it's true is what we're about to um now if we're not unmounted between we are mounted then we're going to send the user who we get back okay I think this is safe now and this is safe what were you idea changes mid-flight oh geez I wasn't gonna go back to you all right you're going if you might be changes when you're in the middle of this yeah then you're gonna have to like basically keep a macbook user ids that you're currently fetching and be like is it it is the new one in the currency fetching lap no yes I don't know right how would you fix it good answer all right so now lying to me I'm gonna do I do a little analysis here so we've got 11 332 so about 21 lines of code right all right so this is this is how a lot of us are still kind of fetching data in her apps right and you'll notice there are a lot of the same patterns that are going on here okay a lot of the same stuff this is your setup right that's the thing that you run when the first time announced and then there's always this part where you have to kind of watch for data that's changing over time right and then there's always the clean up right there's always the part where you clean up and then there's the part where you actually render with the stuff that you've got right with the actual data that you've done okay oh and then there's a there's also another part where you actually keep the stage and then you want to make sure that you're if you're cleaning up as you go right as the users ready changes okay so so far Apollo is code like this we're so morning grab if you're not using it his coat they look something like this if you're doing a fetching so let's let's let's let's go back so I want you to consider this this example take all the stuff and put it back at the top bear with me probably an easier time for factoring so so so hang on you mean this does the same thing as what was going on up here right we're actually cheating a little bit we're not doing the exact same thing we're not handling the case where you're in the middle of affection then they change to use their ID on you okay so with let's handle out I'll say let current equal true and then in my clean up function so this is the third part of the use effect API in the first part is the setup the setup function right the effect itself the third Parker the second part is the dependency array the third part is the clean up function so in our clean up function we're just going to say current equals false and then we'll only knew this work if that flag is still true so now this book is feature complete with that component oh yeah okay do you see how they identified a lot of the common pieces that you have in your data that chain components and then kind of distill it down they're like oh yeah the setup right that's all of this stuff right the clean up is this function here right the the dipping now think about what happens if the user ID changes in this case yeah if the user ID changes we're going to plug a new user ID into the use effect dependency ring which signals to react hey it's time to rerun that effect again clean up from the last one and rerun the effect for that for that new user so that question that Ryan asked me about like what if they use right he changes mid-flight right so what if you've got one user ID here and then by the time you get down here the UID change do we have that problem do we have the concurrency issue here because Evan don't we know because every time every time we run this side effect we clean up from the previous time okay it's a nice nice mom okay let me let me do one really quick for these posts and then I'm gonna turn down my like five okay so we'll have another effect affects these posts so this one appearance is a pretty simple like a straightforward like fetch right gonna go to the server fetch something get it back store to the states right there are other types of data descriptions that are more like subscribe I'm sorry dad that's just been a more like a subscription right where the data is like streaming in on their web socket or something maybe you're building your house firebase or whatever okay so we can do something like let's subscribe to the posts for this user ID and this API works like this so I've got a function call subscribe to post I put in user ID I give it a callback whatever this user gets new posts that callbacks gonna fire right so in here we can set up close like this I'm gonna say this one is also dependent on that that user ID so as that user ID changes I'm gonna want to get the posts giving you posts in and the books in this example is what generates the rings around my mug so so in this case get the boats set and when I get back this actually returned to cleanup function so so the thing that I returned from subscriber posts when I call that function it makes sure that the subscription is no longer called right so I might return that from my side effect react knows how to clean up the last subscription right so am I good just think about all the things that are going in we have state initialization we have cleanup and then we have when the UID changes we have two things going on right there's cleanup the last subscription and initialize at the post state okay all of that stuff is going on these couple of lines here cool thing about these air hostesses we can actually make this a lot sure you get it shorter than that I have this posts set posts what we really need there is that a set post what about this returning thing hmm okay although what's going on in that one line of good I'm doing state initialization right I'm doing cleanup of the last subscription and when the user ID changes I'm watching for that and I'm cleaning out the last one and I'm reinitializing the state right we set up the subscription that is a lot of stuff for one line of code right it's basically all of this stuff right this is the this is that go check with the user any changes and then reset up the subscription right actually I should have something like you know this stuff tear down here right so but you can imagine you can imagine the exact same component setting on the subscription would actually be a little bit longer than that right so what does the advantage of books is if all my code is going to be so sure it's gonna be like cool really cool but that wasn't the thing that really really sold me on it you know was the thing that really sold me on it I mean this is a good sell like I can stop here I'd be happy the part where I was like was when I realized that because because you can just call these functions in order right just like writing the same light reactors just tracking the order of the functions as they're called does it matter if I call that function here on line 37 or find another function that says that that does that work of you and I call it right here right like all I did was take this line of code that was sitting right there and I put it inside a function and I call that function instead right we're kind of getting at something here right this is the ability that you have to refactor functions right if you have a big swath of code sitting somewhere and you don't particularly like it maybe your function is too all right you can just take a chunk of it and you can put it in another function and call that function right it would be that yeah my boy right all right here's what we're gonna do we're gonna say cost user is use user love UI pop jeez sorry sorry oh jeez every once in a while I'm like using vim so superpowers so I'm gonna copy this code up here I'm gonna copy this side effect the only thing I'm gonna return it is a user gonna call this use user SME use user user user with the UID okay what's going on why is this so exciting I just took a bunch of coded out of here write it what's down here and I said no I'd rather put it up here right what does that let me do reuse it right I'm gonna stick this in a file called user J s and now I everybody else on my team can use that right and they can compose that in to their function right all they have to do is come here and call check it out we do the same thing let's take it out here function use posts passing easier let's return and post cuz posts is used posts of the UID okay what is even going on right we took all of that code and we just boiled it down to two lines how are we able to do it with with two lines it's because of the way that functions compose right you do this whole thing you pull apart functions you give them arguments you pull them into smaller functions right what if we want to run user and the posts user and posts gee I wonder how I would do that don't celebrate yeah that's the first if you are worthy as the first challenge right now some of you might be like oh that's just another function but I don't care because hostage you can write your own one and it's not that hard right like you can write your own function to do this right we just composed two looks together and everything that those hooks entail don't make me rattle off the list again all the stuff that they're doing behind the scenes you know all the stuff they're doing right set up cleanup reinitialize ation when it changes right and clean up win the fing amounts right and we can take all of that behavior and wrap it up in a function and say here you want the user NS posts just plug in a user get all of that behavior for free right you can wrap up you can wrap up authentication and the one little function right imagine what you can do with this you can feel like that's it if you have that function called use off you just drop them at any component in your app anywhere you go and you'll automatically know the current user that would be pretty cool right you know have to pass it down as a prop everywhere right what if you had something like I use pull like this use my use my dad right and here you can have your map States props right and here's you just returned returned the pieces of the props that you need in work if we're staying true to the redux example we would just return our Oh Oh sometimes I forget you know a little bit excited I use both return statements cannot you're right okay so that's so we used everything working you get what I'm saying right you can have you can have any of these little one-liners and what is that wrapping up its wrapping the ball into stuff get wrapping that ball kind so when I say composability this is what I'm talking about okay this this these books are a composable primitive you can wrap up life cycle you can wrap up state management you can wrap up multiple pieces of state management and life cycle all on the exact same hook car going around put it anywhere you want in your act and that's why I'm so so excited about that so thank you for giving us some time to talk to you tonight [Music] [Applause] questions around be back at 3:00 see if we yeah I saw the inside problem support even I think you do - gravity boots yes it's a better question and the people take that way too seriously it's a thing that happens it's not like a goal it always happens because you're using Redux when you think about it right because you want to connect that one and you don't have to connect them all over the place so you want to just kind of connect this one and have it have all the data and then it will pass across to the other ones and then before you can take advantage of a pure component right so it almost happens as a side effect of the fact of the way of the choice that you may use Redux um also another way to think about this is your smart component is now a book yeah the user component the thing that's responsible for fetching data it's just up yeah so so that you're that you're splitting yeah unit testing how do you test it yeah Michael I've never used the testing library regards your suits react Dom render let me show you so let me show you the react react router tests always look at that here's the question about this testing unit testing code generally the people have to you can't use a book outside of the component you really just need to make a component right there within the test right just make a quick function use the hook inside of it and then do you normal assertions inside of it just number finger so we'd use gist but just is more like a test run right he's just and then just has the the expect librarian sort of bundled with it so this is really all you need to do when you want to test something is you just render your component I've got me to help her called render strict that automatically wraps it in a strict load so we're sure that all of our stuff is strictly compliant but that's all it does render your component and then go ahead and and make your assertions right so I personally never understood why people bring in ensign I guess it's because of the selector thing where you can select like deeply nested elements yeah just about our favorite topic yeah you have to name of use some yeah yeah yeah did we see the morning so rule so like we've all the double-edged Adeus Lincoln fix that are actually a waste of everybody's time so hopefully this one that is a great tool real all adopted ask anyway one of them's called rules of books so if you put a book inside of them if statement it's gonna go ahead don't do that use and so we can't help you with the rules what that mean if it's not going to know so now go rename it to you what about to be used and I will see I will see a little problem show up you got a good on sixty three also react hook user and boasts is named terribly and is called conditional must be called in the exact same order in every component printer if so out there there are a handful of book comes with books but only if you don't have the ledger if you've got the winter pretty much all can go away and little just like say hey you forgotten dependency hey render this conditionally so you don't let like you think about all the problems we had with binding functions and this right can't call says stated no we couldn't hang out the linter that could like find those errors for us so what we've done with books as we've traded the complexity of classes with the complexity of understanding how closures work in JavaScript the difference is with classes we can't write tools to lead us the right direction with closures we actually can have a vendor can say hey you closed over this when you're using a letter you didn't pass in this dependency so passing in the pendency so it's to be super exciting especially for people due to react is a you know really can help you write the code right and know shoot yourself oh here use multiple render props right there they're like infamous for this right and then you go now well it took there's higher it seems like the most dependable using yeah now I'm finally ready to render something right I'm finally got all the data I need now I've got the user at the post so the way they compose is in the JSX which forces everything out right right so you end up with this kind triangle whereas the way these things compose is just like them just by calling functions and consecutive lines right calling them consecutively instead of way and if you're ready to class correctly you already have that like Michael had in his code writers aren't even dipping the problem and that that's there's some really different than what react is doing this thing I am like you would have if you were doing if you're in your class correctly like you would have you would be doing that comparison the use object on is which is explaining facts and effects that will never be available though the answer is always render less stuff if you've got performance issue [Applause]

Channel: Boston React

Views: 96,828

Keywords: react hooks, useeffect hook, usestate hook

Id: 1jWS7cCuUXw

Length: 62min 50sec (3770 seconds)

Published: Sat May 04 2019

Reddit Comments

[u/swyx]

reminder you can see their workshop for free here https://reddit.com/r/reactjs/comments/biimyk/react_trainings_hooks_workshop_repo_ryan_florence/

[u/[deleted]]

[removed]

[u/greeneggsnspaghetti]

I'm sorry but...Michael Jackson!!!!!!!!!

[u/quick_code]

it's so awesome

[u/tapu_buoy]

I watched this last week and I only enjoyed and liked the first guy's talk

[u/the-ue]

I just created an extension for converting old state to useState check it out https://github.com/ue/make-usestate