 of React and with the new latest version we're really loving it like we're going all in on this technology so what it is right it's a four corners of a chess board rokes nope nope sorry I think that's a wrong thing yep hooks hooks yes so today we'll be talking about hooks how they work and how to use them effectively so first of all what are hopes right so hooks were released in October 2018 at red corn so it has been roughly six to seven months so I'm pretty sure all of you have at least heard about folks right can you give a raise up of the hand how many of you guys are using hooks right now okay that's like one third okay that's pretty good so for those who aren't familiar with rear quotes it is 11 new functions are released by react and all this combined to get a form the concept of hooks right so they are 11 and we only have 20 minutes so that's unfortunately not enough time so we're gonna do what Thanos did and gonna cut it in half we're gonna talk about this five hooks right use state use effect and so on so to start with folks you need to understand the basic rules one you can only call them at the top level which means you can't call hooks with it else or for loops or within other functions and the second thing is you can only call hooks from react functions this means no class components when I first heard of this it sort of bewildered me and I when why like this rule seems quite arbitrary to what we're familiar with as programmers we should be able to call functions whenever and however right so I went to down into the soft code to find out how they actually work underneath so on mounts what is going to happen is whenever you call hook it is going to store a value within a box in react and when you call second one it sort of puts the value in a second box sort of like an array or a link list and so on on re-render meaning on update whenever you call a new hook react is going to look at the first box and return the first value similarly for the second hook is going to look at a second box and give you the second value and so on so what happens if we violate the rules well if you call an if else condition and on an end render the second hook is going to miss out or not be called react is still going to look at the second box and give you the value for the second hook and obviously this is wrong and on the next call reacts gonna be hey there's supposed to be a third hook but it's not there so I'm just going to throw an error and that is indeed what happens all right so now that we know the rules let's look at how we can use hooks the simplest hook is use state which is a combination of this dot state and this dot set state that we're so used to within class components so we can see that when you call react dot use state what it is doing is giving you an array for which the first value is a value of the state and the second value is a function for you to mutate or set the new state similar to set state that you're also used to and to demonstrate I have a demo here so this is a very simple input right where we have value name and set name so on change we're going to call set name with the value of the target to uppercase so this is just a very simple demonstration that hooks do indeed work because it does so what is the difference between use state and this dot set state there is actually a very clear distinction so in this second demo what I have is three set states or sorry two three set states with hooks so the first call I'm going to set object with a equals to two but we you do realize that there's both a and b keys so when I only set a what it's good react is going to do is override the values so it is different from this dot set state because it does not merge the values for you like the original class this dot set state on and the second set state what it is doing is it is spreading the values of object and here we see that a and b are updated and still remain there there is a third way that you can do so here call back which is very similar to this dot set state so that is use state so the second hook is use effect and it is very similar to component did mount or component did update so here on the right you can see that there is use effect right where we are trying to mutate document dot title so one important thing to realize is use effect takes in a second argument over here I put in an empty array so this array conceptually I like to think of it more like dependencies right what does use effect depend on over here is an empty array so it depends on nothing so what this means is it only runs on mount so let's look at a demo right so for our first component our use effect has undefined as a second argument so what is going to happen is on use effect it is going to call set counter set counter triggers a re-render re-render cause use effect use effect cause set counter triggers a re-render so on and so forth so that's why the count is going up so fast as you can see so why do we have to be careful right now this is just a set counter but if you are using say something like a REST API well by this time it's gonna get caught 120,000 times yep your API limits will go through the roof if you're not careful so what happens if we pass in an empty array as a second argument it's only over it's only going to get caught on mount so it's going to trigger once and here we can see that counter is one on a more complicated example we're going to have use effect depend on this variable called step so step is going to increment by one every time I click on this button but whenever step changes it also triggers a use effect which triggers a set state and so we see that instead of count going up by its original value it's going up by 3, 6, 10, 15, 21 so like if you wanna see and this is sort of like a cascading effect of use effect that we can all use and depend on so how do we unmount things right for use effect you can return a callback so whenever it is unmounted or when the dependencies are changed use effect callback is going to be caught and it will trigger so on the right there is a very typical example where you would mount event listener and unmount an event listener when I first started using use effect I this thing sort of got me where as compared to class life cycles like component did mount component did update and component will unmount right it actually triggers before the browser pins so I will demonstrate this with a demo later but what use effect does is it triggers after the browser pins so I have a demo here where on initial text is a very long chunk of text and on component did mount I'm going to set state and say set it to component did mount fire so if I click on it multiple times you realize that you don't ever see the initial text but I have a use effect function here and it does mostly the same thing but you do find that hey the initial text appears for one frame and disappears and that is indeed what is happening because remember that use effect fires after the browser pins yep so how do we manage that if you want the original behavior well there is this code use layout effect which does what component did mount and component did update do in the past right so let's sort of run through all of the effects that we've learned so far so on mount what's going to happen is it is going to run your react not lazy stuff and it is going to render react later updates the DOM then runs a layout effects browser pins the result of it then then it runs the effects of use effect on update you will render react will update the DOM clean up layout effects run layout effects paint clean up effects run effects on unmount it is going to do a very simple thing of just cleaning up all the things now for those who are careful they realize that use effect actually fires before use effect us sorry I mean the cleanup effect fires before use effect right and this was why I thought to that my mental model was react would call use effect then call the callback then the next render happens but that is actually not what's happening react would instead fire use effect then on the next render it will call your callback so it is sort of conceptually confusing because whenever it calls a callback is actually calling the previous renders callback yeah for those who are unclear on this it would be useful for you to and this is sort of edge case so it really comes up but if you just have two use effects you will be able to understand what's happening before and after right our fourth hook use react so for those that have used create react before this is very similar you're going to create a wrap and later on when you use it you can just put it within your react element and it will work as per normal so to demonstrate this I have a form an uncontrolled component in which you pass a wrap into the component then later manipulate it somehow so over here I put in a file input wrap and following I'm going to get the first file when I click submit which is indeed what is happening here so there is a second way that you can use use wrap which is sort of like a class instance variable and on the right you can see like a very typical kind of thing where use use effect sorry use wrap is holding a ID of set interval and later on we're going to call the callback and clear interval so this is how you normally write clock in use in hooks so how would you so in normal class components this is how you write it right you would set this dot ID equals to set interval and perhaps on component will unmount you would call here and as per normal you render how you would do this yep but one thing to be careful is use wrap is different from all your normal state so it is safe you should be careful to treat it like a side effect so in a future versions of react where you have concurrent mode or even right now with if you are using strict mode this is what you would happen if you don't treat use wrap as a side effect so I have a bad counter that simply treats it treats are use wrap like a variable and I have a good counter that actually uses use effect and treat it like an effect so if I click on big ones good counter goes up to two but bad counter goes up to three and it's sort of deviates from what you would normally expect here I'm using strict mode so what's happening react is going to re-render more than just once in a future versions so what is happening is if you don't treat it as a side effect right they are going to be multiple renders or rather more renders that you would normally expect and this is what causes this weird behavior the final book that we're going to talk about today is use context so use context is pretty simple you're going to use create a context here after that we are going to call react dot use context to get the value of color in this instance and to demonstrate how it works I'm going to have a color value here that is being passed out in context and when I click switch color is going to update so color is not receiving any props but it is updating from context there is a catch though because there is going to be some performance issues so in this next demo I have I have a team in which background is a constant so it never changes but it's being passed down through the same context and in background color I'm only ever using background so what is happening if I click switch color do you realize that account is going up even though background color remains the same value and that's because whenever context updates it triggers re-renders in all the components that uses this context so how do you deal with this there are three methods first you can either split up context you can use react dot memo or you can use a third hook called react dot use memo I won't go into this because they are very complicated and it is quite rare that you are going to need them because of this fourth method so this is that it's like I found while going through the source code and I saw that there's going to be like this cool new function where you're going to set bits to update and allow react to update based on the bits and this is really arcane to me and I saw that hey this seems like a new feature that react is going to announce soon in the future so I wouldn't recommend going through the three methods to pre-optimize yet just in case you know this comes out soon so how do we test hooks so for those that have used hooks before right react has released this new function called act and there is a long extensive document explains how act works and how to use it for testing I won't go into it too much but what it is is you can use as compared to a normal function when you render something you're going to call act and act will basically flush out all the effects and make sure that by the end of your expect statement all the use effects use layout effects are going to be finished when it happens so if you are using enzyme this enzyme it is going to get slightly more complicated aside from simply using act you also need to use mount where because shallow won't do and in addition to using to mount you need to call rapper dot update to update them there is a third library called react testing library the name is rather straightforward and so is their testing so it is very simple all you have to do is import render and simply render it what's going on underneath is render already calls act for you so you don't have to do any of those magic stuff yep and that's all thank you any questions yes yeah so we're we at Zendesk we do use hooks and we actually are migrating a lot of stuff over to hooks and the reason why is because hooks in addition to being simpler to use it is also less complex to maintain and it helps really reduce a mall of logic that goes underneath especially if you are using things like render props where if you have multiple of them you'll sort of be like this pyramid of doom and if you use hooks since it requires everything to be at the top level it's just one straight line yes yes yeah so we've read us you would normally use something like with readouts where you would call I'm sorry I'm assuming you're using react with us library with this so with readouts it's going to be a HOC so within the HOC it can still be a class component it can also be a functional component in which case you can continue to use hooks yeah but react with us currently does not have a hook counterpart and that's because of certain issues relating to use context that I mentioned any more questions all right thank you