Bdtjtk

In my react native project, when I click a button, my mobx app state gets updated.

I want to use react lifecycle method to listen to this update and automatically update it. So I am using componentDidUpdate.

  componentDidUpdate(nextProps, nextState) {

    this.setState({number:store.requestObject.number},

    console.log(this.state.number), 'state changed')

  }

But it seems like this method will not automatically update.

Should I be using other lifecycle method? Any comments or advise would be really helpful. Thanks in advance!

Edited

In my first screen, I have a button and onPress I can store data to mobx store. Then, in my second screen, I want to call the mobx state and update it with my current component's state. I could use button something like:

 <Button onPress={()=> this.setState({currentState:store.mobxState})}>

Then, my current component state will match the mobx state it works fine but I want to do it automatically(not with a button).

You will not get changed state value in the next line. We can use the callback method here

handleMonthChange_next = () => {

this.setState({

    currentMonth: this.state.currentMonth + 1

}, () => {

 this.props.getCalendarData(this.state.currentMonth)

})}

You can use getDerivedStateFromProps

static getDerivedStateFromProps(props, state){



}

Note that this method is fired on every render, regardless of the
cause. This is in contrast to UNSAFE_componentWillReceiveProps, which
only fires when the parent causes a re-render and not as a result of a
local setState.

Reference

To be more specific, when you call this.setState({}), your getDerivedStateFromProps will be called and from there you can read your changed state value and perform some operations.

if you dont want to user given methods then make your custom event that listen to state

stateListiner = (state) =>{

  this.setState(state,()=>{

    //listen to state change after setting it 

    // add your logic after state update 

  })

}



// call the state 

let givenState = {name:'xyz',visible:false,}

this.stateListiner(givenState) // this will set your state and fire the callback function 

Use the react setState callback:

componentDidUpdate(prevProps, prevState) {

  this.setState(

    { number: store.requestObject.number },

    () => console.log(this.state.number, 'state changed') // callback will fire after state update

  );

}

Note though that setting state within componentDidUpdate is recommended to be behind a conditional check so to not get your code into an infinite loop. The code above will. Also, the parameters it receives are the previous state and props, not the next. It's only called after state has been updated or the component receives new prop values.

componentDidUpdate(prevProps, prevState) {

  if (prevProps.value !== this.props.value) {

    // handle change, log it, api call, call other callback, etc...

  }

}