Control React Component Updates When New Props Are Received
The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that. componentWillReceiveProps gives us an opportunity to update state by reacting to a prop transition before the render() call is made. shouldComponentUpdate allows us to set conditions on when we should update a component so that we are not rendering constantly. componentDidUpdate lets us react to a component updating.
[00:00] In this lesson, we're going to talk about the updating lifecycle methods that are available to us in our components.
[00:05] To get us started, I'm going to return a button. It's going to have an onclick handler of this.update.bind. to this. It's inner html is going to be this.props.val. We're going to get that val from default props. I'm going to say app.default props equals, we'll set our val to zero.
[00:33] We're going to go ahead and create this update method. We're going to get a little tricky with this one. We're actually going to rerender our entire component.
[00:41] I'm going to say ReactDOM.render app. I'm going to target the same div that we're targeting index js. Here, we're going to say val equals, and we're going to say this props.val plus one. Every time we render it, we're going to increment by one that value of val. If we save that and try it out, each time we click on this, it get incremented by one because of its new props.
[01:07] I'm going to add to this some state. I'm going to set up our constructor. We'll call super to get our context. I'm going to set the state to equal. We're going to have a value here for increasing. I'm going to set that to false. What we want to do is determine if the new prop that's coming in of val is increasing from the previous prop or not.
[01:28] The first updating lifecycle method we can look at is component will receive props. This means that new properties are coming in. We get access props right here, with this variable, next prop. What we're going to do is we're going to set our state of increasing to next props.val is greater than this props.val.
[01:48] Then here, in our render method, we'll simply cancel log this state.increasing. The first time through, that should not be true. Each subsequent rerender it should be true.
[02:00] We'll save that and open up our dev tools. Here's the first firing. We'll click on this guy, and from here on out, it's going to be true, because we're constantly increasing that value.
[02:10] The next updating phase we can look at is should component update? This is going to take in our next props, as well as our next state. What I'm going to do here is say if the next props not val is a multiple of five, then, we'll go ahead and update it.
[02:28] Here, it's simply returning a true or false. It's important to note that this doesn't prevent our state, and of course, not our props, from being updated. It simply prevents a rerender. If I save that, two, three, four five, we get our update, one, two, three, four, five, we get our update. Again, the state has actually been changed.
[02:49] The last one we can take a look at is component did update, which takes in our previous props, as well as our previous state. Here, we'll just logout prev props, and the actual previous props. Here in the browser, we'll click one, two, three, four, five. Whoops.
[03:09] Let's go ahead and get the val off of that guy. Prev props val. One, two, three, four, five. We can see our previous prop was four, that indicates that our state is actually being updated while our props are actually being updated. We can see from our state we've got true, and our prop is now four. If we go one, two, three, four, five, we get nine.