 Can I get the four seconds back please? Okay, good evening. I'm here today to talk about hooks and the title of my talk is hooks all about render. So the basic premise of this is basically my personal opinion on why I think what's so cool about hooks. I don't have a bio-slide because I was having fear about not making the time. So I'm just going to go straight into it, but my slides don't move. In the beginning we had class components, okay? We still have them, but in the beginning there were class components. And class components are great, right? They let us do a lot of things, namely manage state, okay? So previously before hooks you couldn't do anything with state in a functional component. So that makes class components pretty good because, well, state's really important, right? In fact, it was so good that we got wonderful diagrams like this explaining exactly how they work. There's all this good stuff like construct, show component update, get derived state from props. There's this big thing called render. There's component update and all this stuff, which is actually not that good, right? Because most of the time you've got to know what all of these things do. You might think it's good because it makes you sound smart when you know what each of these things do, but to be honest, none of these are directly related to what we're trying to achieve. None of this is directly related to UI. It's essentially an implementation detail of React itself and it's a life cycle, right? It's part of the life cycle and the life cycle is something to do with the component, not really to do with UI, right? We need to know about it in order to achieve the things we want to achieve in the UI, but ultimately it's an implementation detail. We had class components, but we also had function components, right? These were different from class components. You couldn't do state, you didn't get access to all these life cycle methods. Things were a lot simpler. You just lived in the now. It's in a sense a more pure function where you get some props and you return some UI. To make the point of this talk, I want to introduce a side effect. Side effects are quite common in React. Typically it's something that reaches outside the component. Let's look at this side effect. I've implemented this as part of a class component. There's a component that updates the life cycle method and inside we compare the props. This is a slightly contrived example just to make the point. There's a timeout and inside the timeout after five seconds we do something. This thing that we do, we need to pass it a value from the props, which we do with this.props.something. I've adapted this slightly from Overreacted.io, the blog of our collective leader. But I've changed it a little bit. This is the side effect. What's not so good about this? We have this timeout and basically after five seconds we do this side effect and we pass it a value from the props. The problem with this is that this may have unintended consequences because this or props.something is always pointing to the latest version of props, which may not be the version of props that was around at the time that the timeout was started. This may be desirable or this may be undesirable. But the point is you have to know. You have to know about this. You have to know about the mutable this. If you didn't know you'll probably have a slightly painful experience knowing about it and learning what it is. The description of everything is spread out. What is everything? It's like what's going on in this component is spread out. It's spread between like there's this function you want to call which is inside a set timeout. We can't get away from that. That's inside this thing called component did update which you have to know about. Component update is like next to a render. What I mean by that is it's a sibling method. Somehow there's a relationship between these two things which we also have to know about. This whole thing is inside a class component which we think we know about. But then there's this value somewhere which seems to be not attached to anything. All in all I'm guessing that it's not confusing for us because we're at a React meetup. We know all about this. But it's kind of a little bit unintuitive if you ask me. So enter hooks. Now I'm going to re-implement this with the use effect hook. And in my opinion this is a lot simpler. Now you do have to understand use effect. So yes there is some kind of... It's not like you look at it and you just know what's going on. But what we have here is essentially we have use effect and every time props.something changes we run this side effect. Now one of the big differences here is that because there's no this the value of props.something is captured at the time that this timeout is started. So you don't get... It's a lot more predictable. In fact if you look at what's going on there's a lot less going on compared to what I described previously with the state of everything. There's no life cycle methods. There's just this use effect which has an argument which lets you define a piece of data that this effect depends on and reruns when it changes. There's no life cycle methods. There's just the component body and the hook. There's no this anymore. It's just the props which belong to the component. And the changing prop values are captured by the component in a much more predictable fashion. Meaning that when this line runs the set timeout line runs whatever value was there at that time whether it be props or state is captured. So I'm not necessarily saying that this makes your life easier because you might actually want the latest props but it is to me at least a bit more predictable. So if you look at what's going on here it's basically everything is just the component. Everything is owned by the component and what is the component really? What is the functional component? Well if we think about this question in terms of a class component then a functional component is really just the random method part. So it's like we're doing everything inside the random method. So really the component is the random method and therefore what Hooks does is make everything just all about the render. That's my last slide.