Understanding Lifecycles methods can be crucial when working with React Js, they have a lot of power when managing states and props, this methods were particularly hard to understand for me in the early days ( I still find them tricky sometimes).

The React documentation is good, but it lacks of practical examples, in this post I will do my best to explain some of them, I will refer some useful links where you can also learn.

Note: You might think this is a bit funny, but before explaining any method, the first thing you need to do before writing any logic inside of them, is making sure you spell them correctly, as they can have some long names.

ComponentWillMount

When?: Happens before the first render.
Can you use setSate?: Yes.

Probably the most popular one but ironically, is the one that could cause more troubles ( some people recommend to not use it at all ). In a lot of examples out there, we have seen developers adding their API request inside here or, but why is not good to use it then?, Well, network request are asynchronous, so, by the time the async operation has finished, the render method most probably already finished, because of this, there is no point to do the setState here, use the constructor for instead, like we see bellow:

class Counter extends React.Component {
  state = {
    count: 0,
    clicksLeft: 5,
  };
....

Read more here

ComponentDidMount

When?: Happens after the first render.
Can you use setSate?: Yes.

Here is where you want to add your network request, it makes sure the data won’t be loaded after the initial render, you need to use the setState, so you don’t get undefined on that first render ( a classic error when starting with React ).

class Counter extends React.Component {
  state = {
    count: 0,
    clicksLeft: 5,
  };
  componentDidMount() {
    console.log("After first render");
    setTimeout(() => {
    	 this.setState({ count: 0 });
      }, 2000
    );
  }

componentWillUpdate

When?: Happens before the initial render.
Can you use setSate?: No.

This one can be used when states or props change.

.....

componentWillUpdate(nextProps, nextState) {
  console.log('Before first render')
  if (this.state.count == 5) {
    nextState.count = 5;
    nextState.clicksLeft = 0;
  }
}

componentWillReceiveProps

When?: Happens after the initial render.
Can you use setSate?: Yes

This one might be a better choice instead of componentWillUpdate, is used only when the props change, it doesn’t trigger another render, states can be updated, depending on the existing and upcoming props.

Refer to this egghead.io video to see a practical example.

componentWillUnmount

When?: Before a component is remove from the DOM.
Can you use setSate?: Yes

Is used to handle errors, to do cleanups, canceling request or dealing with timers defined in componentDidMount.

.....

componentDidMount() {
  .......
  this.inc = setInterval('Memory lik', this.clickleft, 500);
  console.log(this.inc)
}
componentWillUnmount() {
  console.log('Unmount')
  clearInterval(this.inc)
}

Below what you get in the console when dealing with the previous code before unmounting.

reactotron with react native

Links

See counter example here
React docs