--- a/devtools/client/inspector/animation/components/AnimatedPropertyList.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyList.js
@@ -20,41 +20,54 @@ class AnimatedPropertyList extends PureC
       simulateAnimation: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
-      animatedPropertyMap: null
+      // Map which is mapped property name and the keyframes.
+      animatedPropertyMap: null,
+      // Object which is mapped property name and the animation type
+      // such the "color", "discrete", "length" and so on.
+      animationTypes: null,
+      // To avoid rendering while the state is updating
+      // since we call an async function in updateState.
+      isStateUpdating: false,
     };
   }
 
   componentDidMount() {
-    this.updateKeyframesList(this.props.animation);
+    // No need to set isStateUpdating state since paint sequence is finish here.
+    this.updateState(this.props.animation);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.updateKeyframesList(nextProps.animation);
+    this.setState({ isStateUpdating: true });
+    this.updateState(nextProps.animation);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return !nextState.isStateUpdating;
   }
 
   getPropertyState(property) {
     const { animation } = this.props;
 
     for (const propState of animation.state.propertyState) {
       if (propState.property === property) {
         return propState;
       }
     }
 
     return null;
   }
 
-  async updateKeyframesList(animation) {
+  async updateState(animation) {
     const {
       getAnimatedPropertyMap,
       emitEventForTest,
     } = this.props;
 
     let animatedPropertyMap = null;
     let animationTypes = null;
 
@@ -63,17 +76,24 @@ class AnimatedPropertyList extends PureC
       animationTypes = await animation.getAnimationTypes(animatedPropertyMap.keys());
     } catch (e) {
       // Expected if we've already been destroyed or other node have been selected
       // in the meantime.
       console.error(e);
       return;
     }
 
-    this.setState({ animatedPropertyMap, animationTypes });
+    this.setState(
+      {
+        animatedPropertyMap,
+        animationTypes,
+        isStateUpdating: false
+      }
+    );
+
     emitEventForTest("animation-keyframes-rendered");
   }
 
   render() {
     const {
       getComputedStyle,
       simulateAnimation,
     } = this.props;