How to see the effect of componentDidMount() in React Native

Question

To realize the effect of componentDidMount(), I wrote the following code segment:

class Blink extends Component {
  constructor(props) {
    super(props);

    this.state = {output: 'c'};
  }
  componentWillMount() {
    this.state.output += 'w';
  }
  render() {
    this.state.output += 'r';
    let display = this.state.output;
     return (
       <Text>{display}</Text>
     );
  }
  componentDidMount() {
    this.state.output += 'd';
    this.setState();
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }

I expected to see four lines of 'cwrdr' according to two reasons:

1. The execution order: constructor(props)->componentWillMount()->render()->componentDidMount()

2. setState() called in componentDidMount() will invoke render() again.

Please kindly share your thoughts on my code and reasoning. Much appreciated.

Answer 1

You've made the mistake of mutating state, by using this line this.state.output += 'd';. By doing so, React no longer knows when it is time to trigger a re-render of your application.

Instead, you want to use setState({output : this.state.output + 'd'}). This assigns a new object to your state, and render will work as expected.

Also, you should remove the this.state.output += 'w'; from the componentWillMount lifecycle. You should NOT do any state-changing operations in this lifecycle method, as it will not trigger a re-render.

componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state in this method will not trigger a re-render. Avoid introducing any side-effects or subscriptions in this method.

Answer 2

First of all you should not mutate the state directly. According to the docs:

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

Secondly: The reason you don't see 'cwrdr' in render is because this.setState() no longer triggers a re-render from v16 onwards. From the blog post

Calling setState with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.

Lastly: Don't setState in componentWillMount synchronously, do it in constructor instead.

componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state in this method will not trigger a re-render. Avoid introducing any side-effects or subscriptions in this method.

Also avoid using componentWillMount as much as possible since from v16.3.0 onwards react has proposed to rename it and deprecate it from v17 onwards. Check this answer on where to place async Requests