Better alternative to shouldComponentUpdate

Question

I'm using react motion for animations in my project.I solved the problem of rendering animations every time when prop change by maintaining state.

const {animation} = this.state;
        if (animation) {
            return (
                 // updates state upon animatioon to false
                 <Animator rest={this.rest}> 
                    {this.getContent()}
                </Animator>
            );
        }
        return this.getContent();

I have a call back that will change my state upon completing of animation.This solves all problems except props changing while animating.

Let's say my animation happens for 2 seconds and call back is triggered after that, but if animation is in the middle like 1 second and my props change then my animation again start from the beginning.

I don't want to use the shouldComponentUpdate as it will stop updating the view.

So how is this situation usually handled. Is it ok to use shouldComponentUpdate.Are there any better alternatives?

Thanks in advance.

Answer 1

If the animation component is rendered in this component (with name A), it will start from beginning every time A is re-rendered. So I think you can render the animation component in another component (B) which is a sibling of A and lies over A with a transparent background, or just use the animation component as the siblling. A and B can communicate via their parent or redux.