how and when to call a react component methods after state change from redux

Question

In a single react component a user clicks a button => which calls a method => triggers an action => async fetch => reducer updates state => component receives new props.

back in the original component that triggered the action I have been using:

componentWillReceiveProps(nextProps){
    if(nextProps.someProp !== this.props.someProp){
        //ok new prop is here
        this.someMethod(nextProps.someProp);
    }
}

Am I going about this in the right way?

It just seems somewhat clunky and detached as a callback mechanism from the user action or change of state. It just makes following the logical flow of the component harder once there are a few of these, I have a component with 3 of these and already think it's not as easy to reason about especially when they are part of a related flow a > b > c . And I have ended up with this kind of thing:

componentWillReceiveProps(nextProps){

    if(this.patchJavaScriptWillLoad(nextProps)){
        this.createPatchInstance();
        // method fires an action which will also result in state change that triggers the below.
    }

    if(this.patchInstanceWillBeReady(nextProps)){
        this.startPatchAudio(nextProps.webAudioPatch.instance);
        // method fires an action which will also result in state change that triggers the below.
    }

    if(this.patchParametersWillChange(nextProps)){
        this.updateWebAudioPatchParameters(nextProps.webAudioPatchParameters);
    }
}

// abstracted away if conditions to make componentWillReceiveProps more readable. 

But is this how it should be done or is this a symptom of not moving enough logic to action creators?

Answer 1

Coming back to my own question years later now.

If I can use a functional component, I would use the react hook useEffect. If the logic can be externalised then perhaps in a saga.

useEffect(() => {
  methodToCallIfPropChanges()
}, [watchedProp]);