Learning React: Updating Component State in componentDidMount()

What componentDidMount() is and when will be executed? #

If you want to execute the application logic when the component is mounted to the screen, you need to define the logic inside componentDidMount():

If you define the componentDidMount method, React will call it when your component is added (mounted) to the screen. This is a common place to start data fetching, set up subscriptions, or manipulate the DOM nodes.

You can see more details in React’s documentation here.

Problem I was facing #

I want to fetch data from an API endpoint when the component is mounted. After that, I need to update the state of this component using this.setState() and the value in component state will be consumed by some other functions.

However, my component state seems not updated to the latest state. This is my first version of the component:

async componentDidMount() {
  const response = await fetch("/my-api-endpoint/resource/1");
  const parsed = await response.json();
  
	this.setState({
      data: parsed, // 1. I set state using this.setState()
  });

  const result1 = parsed.someValue; // 2. getting the correct value here
  const result2 = this.state.data.someValue // 3. getting the value before setState()
}

When I compared result1 and result2, I found that result2 was using the previous value stored in the state.

So, what is missing?

Do you stuff after the state is updated #

I checked the React’s documentation about the setState : https://react.dev/reference/react/Component#setstate

The function is defined as this: setState(nextState, callback?)

Which means we are able to run a callback function in setState. Therefore I build a second version of the component:

async componentDidMount() {
  const response = await fetch("/my-api-endpoint/resource/1");
  const parsed = await response.json();
  
	this.setState({
      data: parsed, // I set state using this.setState()
  }, () => { 
      const result2 = this.state.data.someValue // now I can get the correct value!
  });
}

If I try to get the value from the state inside the callback, I will have the latest value, which is the expected one.

In other words, remember to execute your follow-up application logic inside the callback of this.setState().

As what I found in React’s documentation:

callback: If specified, React will call the callback you’ve provided after the update is committed.

Conclusion #

If we need to update the state inside componentDidMount() and use the latest state right after the state has been updated, we need to place the logic inside the callback of this.setState().