--- a/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
@@ -30,29 +30,38 @@ class SummaryGraphPath extends PureCompo
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
       // Duration which can display in one pixel.
       durationPerPixel: 0,
+      // To avoid rendering while the state is updating
+      // since we call an async function in updateState.
+      isStateUpdating: false,
       // List of keyframe which consists by only offset and easing.
       keyframesList: [],
     };
   }
 
   componentDidMount() {
+    // No need to set isStateUpdating state since paint sequence is finish here.
     this.updateState(this.props.animation);
   }
 
   componentWillReceiveProps(nextProps) {
+    this.setState({ isStateUpdating: true });
     this.updateState(nextProps.animation);
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return !nextState.isStateUpdating;
+  }
+
   /**
    * Return animatable keyframes list which has only offset and easing.
    * Also, this method remove duplicate keyframes.
    * For example, if the given animatedPropertyMap is,
    * [
    *   {
    *     key: "color",
    *     values: [
@@ -160,17 +169,23 @@ class SummaryGraphPath extends PureCompo
     }
 
     const keyframesList = this.getOffsetAndEasingOnlyKeyframes(animatedPropertyMap);
 
     const thisEl = ReactDOM.findDOMNode(this);
     const totalDuration = this.getTotalDuration(animation, timeScale);
     const durationPerPixel = totalDuration / thisEl.parentNode.clientWidth;
 
-    this.setState({ durationPerPixel, keyframesList });
+    this.setState(
+      {
+        durationPerPixel,
+        isStateUpdating: false,
+        keyframesList
+      }
+    );
 
     emitEventForTest("animation-summary-graph-rendered");
   }
 
   render() {
     const { durationPerPixel, keyframesList } = this.state;
 
     if (!durationPerPixel) {