React Native - how do I trigger a function based off a change in a reducer value?

Question

I have a question about how to trigger a function in one component on the change of a reducer value from a different component.

I currently have a function in my Home component that runs in ComponentDidMount . If my value this.props.reducer.run is true the function fires. The initial state is set to true so the function fires when the app first loads.

In my Profile component I have a toggle switch with toggles this.props.reducer.run to true or false . Is it possible to trigger my function in Home when a change to the reducer value occurs?

Below is a mock up of the code i have, i am wondering if ComponentDidUpdate is what I should be looking at, if so some guidance would be appreciated:

Home.js

...

myFunction() = > {
   console.log('fired')
}

ComponentDidMount() {
   //runs on load
   if(this.props.reducer.run == true) {
     this.myFunction()
   }
}

...


**Profile.js**

...

toggleRun = () => {
   this.props.setRun(!this.props.reducer.run)
}
...

Answer 1

yes, you can do this with componentDidUpdate . When componentDidUpdate is invoked, it will be passed the previous value of your component props (let's call this prevProps ). By comparing the prevProps.reducer.run to this.props.reducer.run , you can determine if the value changed and, if it did, call your function accordingly.

Alternatively, if this were a functional component you could achieve the same with useEffect .