Functional setState doesn't work in REACT

Question

My attempts to change the value of the state "id" with setState doesn't work. I've tried using ordinary setState, which doesn't update the value of the state. So I tried a functional setState, but it still doesn't work. The alert shows 0, instead of 5.

Why is it not updating?

class Form extends Component {
 constructor(props){
  super(props);
  this.state = {lat: null,
                lng: null,
                radius: null,
                id: 0,
                filename: ''};
  }
  componentDidMount() {
    function setStateFunction(state, props) {
      const newState = {...state, id: 5};
      return newState;
    }
    this.setState(setStateFunction);

    alert(this.state.id);
  }

  render(){
    return (<div>...</div>);
  }
}

Samuel Hulla · Accepted Answer · 2020-06-27 13:42:37Z

3

You've got a giant anti-pattern over there. First of all, it does not make sense, to be initializing the state in constructor only to re-initalize it in componentDidMount.

So unless componentDidMount itself is asynchronous, you should never even be using setState inside it (Even the default configuration by the React team actually throws an error in their eslint-react-plugin if you even attempt to do so - which by the way I strongly recommend you install, it's very good for beginners to help prevent common antipatterns or common mistakes).

Not to mention, state itself is asynchronous, so it does not update the moment you change it. Furthermore I presume you're trying to learn here, but just in case this code goes to actual production, you could always simply declare it in constructor

Essentially your code could simply be

class Form extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // rest of your state ...
      id: 5
    }
  }

  componentDidMount() {
    const { id } = this.state
    alert(id)
  }
}

As to the code itself, as I've mentioned, setState is an asynchronous operation, that does update the state instantly. One important rule to remember, any time you set state and want to work with the changed value, you should provide a callback

setState is defined the following way setState(Function => Object | Object, callbackFunction)

So essentially, what you want to be doing in your code is

this.setState(setStateFunction, () => alert(this.state.id))

edited Jun 27, 2020 at 13:42

answered Jun 27, 2020 at 13:40

Samuel Hulla

7,2808 gold badges46 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Swampy Over a year ago

I made this test pattern because I wanted to get setState to work correctly before using it in my main application. So this is just a test pattern. Thank you for your answer!

Nithish · Accepted Answer · 2020-06-27 13:27:45Z

2

Updating a React component's state is asynchronous. It does not happen immediately.

Since setState is async, the changes might not get reflected as soon as you call it even by passing a function as well. If you want to check whether the value is getting updated or not you can check by using the callback of setState result like below.

componentDidMount() {
    function setStateFunction(state, props) {
      const newState = {...state, id: 5};
      return newState;
    }
    this.setState(setStateFunction, () => {
      alert(this.state.id)
    });
  }

answered Jun 27, 2020 at 13:27

Nithish

6,1273 gold badges13 silver badges25 bronze badges

1 Comment

Nithish Over a year ago

Happy to have helped you :)

Collectives™ on Stack Overflow

Functional setState doesn't work in REACT

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related