diff --git a/src/components/ContextualSaveBar/ContextualSaveBar.tsx b/src/components/ContextualSaveBar/ContextualSaveBar.tsx
index cdd4ec38d24..cde015d197e 100644
--- a/src/components/ContextualSaveBar/ContextualSaveBar.tsx
+++ b/src/components/ContextualSaveBar/ContextualSaveBar.tsx
@@ -1,64 +1,37 @@
 import * as React from 'react';
-import compose from '@shopify/react-compose';
-import isEqual from 'lodash/isEqual';
-import {ContextualSaveBarProps, FrameContextType, FrameContext} from '../Frame';
-import withContext from '../WithContext';
-import {WithContextTypes} from '../../types';
-import {withAppProvider, WithAppProviderProps} from '../AppProvider';
+import {ContextualSaveBarProps, FrameContext} from '../Frame';
 
 // The script in the styleguide that generates the Props Explorer data expects
 // a component's props to be found in the Props interface. This silly workaround
 // ensures that the Props Explorer table is generated correctly, instead of
 // crashing if we write `ContextualSaveBar extends React.Component<ContextualSaveBarProps>`
 interface Props extends ContextualSaveBarProps {}
-export type ComposedProps = Props &
-  WithAppProviderProps &
-  WithContextTypes<FrameContextType>;
 
-class ContextualSaveBar extends React.PureComponent<ComposedProps, never> {
-  componentDidMount() {
-    const {
-      props: {polaris, context, ...rest},
-    } = this;
-    context.setContextualSaveBar(rest);
-  }
+export default function ContextualSaveBar({
+  message,
+  saveAction,
+  discardAction,
+  alignContentFlush,
+}: Props) {
+  const frame = React.useContext(FrameContext);
 
-  componentWillUnmount() {
-    this.props.context.removeContextualSaveBar();
-  }
+  React.useEffect(
+    () => {
+      frame.setContextualSaveBar({
+        message,
+        saveAction,
+        discardAction,
+        alignContentFlush,
+      });
+    },
+    [message, saveAction, discardAction, alignContentFlush],
+  );
 
-  componentDidUpdate(oldProps: ComposedProps) {
-    const {
-      props: {polaris, context, ...rest},
-    } = this;
-    if (contextualSaveBarHasChanged(rest, oldProps)) {
-      context.setContextualSaveBar(rest);
-    }
-  }
+  React.useEffect(() => {
+    return () => {
+      frame.removeContextualSaveBar();
+    };
+  }, []);
 
-  render() {
-    return null;
-  }
+  return null;
 }
-
-function contextualSaveBarHasChanged(
-  {message, saveAction, discardAction}: Props,
-  {
-    message: oldMessage,
-    saveAction: oldsaveAction,
-    discardAction: oldDiscardAction,
-  }: Props,
-) {
-  return Boolean(
-    message !== oldMessage ||
-      !isEqual(saveAction, oldsaveAction) ||
-      !isEqual(discardAction, oldDiscardAction),
-  );
-}
-
-export default compose<Props>(
-  withContext<Props, WithAppProviderProps, FrameContextType>(
-    FrameContext.Consumer,
-  ),
-  withAppProvider(),
-)(ContextualSaveBar);