Preventing unnecessary AnimateInOut re-renderings

src/view/animate-in-out/animate-in-out.jsx

@@ -20,6 +20,44 @@ type State = {|
   animate: InOutAnimationMode,
 |};
 
+const getNextStateFromProps = (props: Props, state: State): State => {
+  if (!props.shouldAnimate) {
+    return {
+      isVisible: Boolean(props.on),
+      data: props.on,
+      animate: 'none',
+    };
+  }
+
+  // need to animate in
+  if (props.on) {
+    return {
+      isVisible: true,
+      // have new data to animate in with
+      data: props.on,
+      animate: 'open',
+    };
+  }
+
+  // need to animate out if there was data
+
+  if (state.isVisible) {
+    return {
+      isVisible: true,
+      // use old data for animating out
+      data: state.data,
+      animate: 'close',
+    };
+  }
+
+  // close animation no longer visible
+  return {
+    isVisible: false,
+    animate: 'close',
+    data: null,
+  };
+};
+
 // Using a class here rather than hooks because
 // getDerivedStateFromProps results in far less renders.
 // Using hooks to implement this was quite messy and resulted in lots of additional renders
@@ -32,42 +70,15 @@ export default class AnimateInOut extends React.PureComponent<Props, State> {
     animate: this.props.shouldAnimate && this.props.on ? 'open' : 'none',
   };
 
-  static getDerivedStateFromProps(props: Props, state: State): State {
-    if (!props.shouldAnimate) {
-      return {
-        isVisible: Boolean(props.on),
-        data: props.on,
-        animate: 'none',
-      };
-    }
-
-    // need to animate in
-    if (props.on) {
-      return {
-        isVisible: true,
-        // have new data to animate in with
-        data: props.on,
-        animate: 'open',
-      };
-    }
-
-    // need to animate out if there was data
+  static getDerivedStateFromProps(props: Props, state: State): ?State {
+    const nextState = getNextStateFromProps(props, state);
+    const shouldUpdate =
+      state.isVisible !== nextState.isVisible ||
+      state.data !== nextState.data ||
+      state.animate !== nextState.animate;
 
-    if (state.isVisible) {
-      return {
-        isVisible: true,
-        // use old data for animating out
-        data: state.data,
-        animate: 'close',
-      };
-    }
-
-    // close animation no longer visible
-    return {
-      isVisible: false,
-      animate: 'close',
-      data: null,
-    };
+    // Avoid re-rendering component if not needed
+    return shouldUpdate ? nextState : null;
   }
 
   onClose = () => {

src/view/droppable/droppable.jsx

@@ -89,21 +89,26 @@ export default function Droppable(props: Props) {
     getDroppableRef,
   });
 
+  const renderPlaceholder = useCallback(
+    ({ onClose, data, animate }: AnimateProvided) => (
+      <Placeholder
+        placeholder={(data: any)}
+        onClose={onClose}
+        innerRef={setPlaceholderRef}
+        animate={animate}
+        contextId={contextId}
+        onTransitionEnd={onPlaceholderTransitionEnd}
+      />
+    ),
+    [contextId, onPlaceholderTransitionEnd, setPlaceholderRef],
+  );
+
   const placeholder: Node = (
     <AnimateInOut
       on={props.placeholder}
       shouldAnimate={props.shouldAnimatePlaceholder}
     >
-      {({ onClose, data, animate }: AnimateProvided) => (
-        <Placeholder
-          placeholder={(data: any)}
-          onClose={onClose}
-          innerRef={setPlaceholderRef}
-          animate={animate}
-          contextId={contextId}
-          onTransitionEnd={onPlaceholderTransitionEnd}
-        />
-      )}
+      {renderPlaceholder}
     </AnimateInOut>
   );