diff --git a/src/components/Frame/Frame.tsx b/src/components/Frame/Frame.tsx
index 6df160ce43a..8fa44c57b7c 100644
--- a/src/components/Frame/Frame.tsx
+++ b/src/components/Frame/Frame.tsx
@@ -1,18 +1,16 @@
-import React, {createRef} from 'react';
+import React, {useState, useRef, useEffect, useCallback, useMemo} from 'react';
 import {MobileCancelMajorMonotone} from '@shopify/polaris-icons';
 import {durationSlow} from '@shopify/polaris-tokens';
 import {CSSTransition} from '@material-ui/react-transition-group';
 import {classNames} from '../../utilities/css';
 import {Icon} from '../Icon';
-import {EventListener} from '../EventListener';
-import {
-  withAppProvider,
-  WithAppProviderProps,
-} from '../../utilities/with-app-provider';
 import {Backdrop} from '../Backdrop';
 import {TrapFocus} from '../TrapFocus';
 import {dataPolarisTopBar, layer} from '../shared';
+import {useForcibleToggle} from '../../utilities/use-toggle';
 import {setRootProperty} from '../../utilities/set-root-property';
+import {useI18n} from '../../utilities/i18n';
+import {useMediaQuery} from '../../utilities/media-query';
 import {
   FrameContext,
   ContextualSaveBarProps,
@@ -48,14 +46,6 @@ export interface FrameProps {
   onNavigationDismiss?(): void;
 }
 
-interface State {
-  skipFocused?: boolean;
-  globalRibbonHeight: number;
-  loadingStack: number;
-  toastMessages: (ToastPropsWithID)[];
-  showContextualSaveBar: boolean;
-}
-
 export const GLOBAL_RIBBON_CUSTOM_PROPERTY = '--global-ribbon-height';
 
 export const APP_FRAME_MAIN = 'AppFrameMain';
@@ -66,340 +56,292 @@ const APP_FRAME_NAV = 'AppFrameNav';
 const APP_FRAME_TOP_BAR = 'AppFrameTopBar';
 const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar';
 
-type CombinedProps = FrameProps & WithAppProviderProps;
-
-class Frame extends React.PureComponent<CombinedProps, State> {
-  state: State = {
-    skipFocused: false,
-    globalRibbonHeight: 0,
-    loadingStack: 0,
-    toastMessages: [],
-    showContextualSaveBar: false,
-  };
-
-  private contextualSaveBar: ContextualSaveBarProps | null;
-  private globalRibbonContainer: HTMLDivElement | null = null;
-  private navigationNode = createRef<HTMLDivElement>();
-  private skipToMainContentTargetNode =
-    this.props.skipToContentTarget || React.createRef<HTMLAnchorElement>();
-
-  componentDidMount() {
-    this.handleResize();
-    if (this.props.globalRibbon) {
-      return;
+export function Frame({
+  children,
+  navigation,
+  topBar,
+  globalRibbon,
+  onNavigationDismiss,
+  skipToContentTarget,
+  showMobileNavigation = false,
+}: FrameProps) {
+  const i18n = useI18n();
+  const {isNavigationCollapsed} = useMediaQuery();
+
+  const globalRibbonContainer = useRef<HTMLDivElement | null>(null);
+  const navigationNode = useRef<HTMLDivElement | null>(null);
+  const skipToMainContentTargetNode = useRef<HTMLAnchorElement | null>(null);
+
+  const [loadingStack, setLoadingStack] = useState(0);
+  const [toastMessages, setToastMessages] = useState<(ToastPropsWithID)[]>([]);
+  const [
+    skipFocused,
+    {forceTrue: forceTrueSkipFocused, forceFalse: forceFalseSkipFocused},
+  ] = useForcibleToggle(false);
+  const [
+    showContextualSaveBar,
+    {
+      forceTrue: forceTrueShowContextualSaveBar,
+      forceFalse: forceFalseShowContextualSaveBar,
+    },
+  ] = useForcibleToggle(false);
+  const [
+    contextualSaveBarProps,
+    setContextualSaveBarProps,
+  ] = useState<ContextualSaveBarProps | null>(null);
+
+  const findNavigationNode = useCallback(() => navigationNode.current, []);
+
+  const handleNavigationDismiss = useCallback(() => {
+    if (onNavigationDismiss != null) {
+      onNavigationDismiss();
     }
-    this.setGlobalRibbonRootProperty();
-  }
-
-  componentDidUpdate(prevProps: FrameProps) {
-    if (this.props.globalRibbon !== prevProps.globalRibbon) {
-      this.setGlobalRibbonHeight();
+  }, [onNavigationDismiss]);
+
+  const handleNavKeydown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      const {key} = event;
+
+      if (key === 'Escape') {
+        handleNavigationDismiss();
+      }
+    },
+    [handleNavigationDismiss],
+  );
+
+  const handleClick = useCallback(() => {
+    if (skipToContentTarget && skipToContentTarget.current) {
+      skipToContentTarget.current.focus();
+    } else if (skipToMainContentTargetNode.current) {
+      skipToMainContentTargetNode.current.focus();
     }
-  }
-
-  render() {
-    const {
-      skipFocused,
-      loadingStack,
-      toastMessages,
-      showContextualSaveBar,
-    } = this.state;
-    const {
-      children,
-      navigation,
-      topBar,
-      globalRibbon,
-      showMobileNavigation = false,
-      skipToContentTarget,
-      polaris: {
-        intl,
-        mediaQuery: {isNavigationCollapsed},
-      },
-    } = this.props;
-
-    const navClassName = classNames(
-      styles.Navigation,
-      showMobileNavigation && styles['Navigation-visible'],
-    );
+  }, [skipToContentTarget]);
 
-    const mobileNavHidden = isNavigationCollapsed && !showMobileNavigation;
-    const mobileNavShowing = isNavigationCollapsed && showMobileNavigation;
-    const tabIndex = mobileNavShowing ? 0 : -1;
-
-    const navigationMarkup = navigation ? (
-      <TrapFocus trapping={mobileNavShowing}>
-        <CSSTransition
-          findDOMNode={this.findNavigationNode}
-          appear={isNavigationCollapsed}
-          exit={isNavigationCollapsed}
-          in={showMobileNavigation}
-          timeout={durationSlow}
-          classNames={navTransitionClasses}
-        >
-          <div
-            ref={this.navigationNode}
-            className={navClassName}
-            onKeyDown={this.handleNavKeydown}
-            id={APP_FRAME_NAV}
-            key="NavContent"
-            hidden={mobileNavHidden}
-          >
-            {navigation}
-            <button
-              type="button"
-              className={styles.NavigationDismiss}
-              onClick={this.handleNavigationDismiss}
-              aria-hidden={
-                mobileNavHidden ||
-                (!isNavigationCollapsed && !showMobileNavigation)
-              }
-              aria-label={intl.translate(
-                'Polaris.Frame.Navigation.closeMobileNavigationLabel',
-              )}
-              tabIndex={tabIndex}
-            >
-              <Icon source={MobileCancelMajorMonotone} color="white" />
-            </button>
-          </div>
-        </CSSTransition>
-      </TrapFocus>
-    ) : null;
+  const showToast = useCallback((toast: ToastPropsWithID) => {
+    setToastMessages((toastMessages) => {
+      const hasToastById = Boolean(
+        toastMessages.find(({id}) => id === toast.id),
+      );
 
-    const loadingMarkup =
-      loadingStack > 0 ? (
-        <div className={styles.LoadingBar} id={APP_FRAME_LOADING_BAR}>
-          <Loading />
-        </div>
-      ) : null;
+      return hasToastById ? toastMessages : [...toastMessages, toast];
+    });
+  }, []);
 
-    const contextualSaveBarMarkup = (
-      <CSSAnimation
-        in={showContextualSaveBar}
-        className={styles.ContextualSaveBar}
-        type={AnimationType.Fade}
-      >
-        <ContextualSaveBar {...this.contextualSaveBar} />
-      </CSSAnimation>
+  const hideToast = useCallback(({id}: ToastID) => {
+    setToastMessages((toastMessages) =>
+      toastMessages.filter(({id: toastId}) => id !== toastId),
     );
-
-    const topBarMarkup = topBar ? (
-      <div
-        className={styles.TopBar}
-        {...layer.props}
-        {...dataPolarisTopBar.props}
-        id={APP_FRAME_TOP_BAR}
+  }, []);
+
+  const startLoading = useCallback(() => {
+    setLoadingStack((loadingStack) => loadingStack + 1);
+  }, []);
+
+  const stopLoading = useCallback(() => {
+    setLoadingStack((loadingStack) => Math.max(0, loadingStack - 1));
+  }, []);
+
+  const setContextualSaveBar = useCallback(
+    (props: ContextualSaveBarProps) => {
+      setContextualSaveBarProps({...props});
+      forceTrueShowContextualSaveBar();
+    },
+    [forceTrueShowContextualSaveBar],
+  );
+
+  const removeContextualSaveBar = useCallback(() => {
+    setContextualSaveBarProps(null);
+    forceFalseShowContextualSaveBar();
+  }, [forceFalseShowContextualSaveBar]);
+
+  useEffect(() => {
+    if (globalRibbon && globalRibbonContainer.current) {
+      const globalRibbonHeight = globalRibbonContainer.current.offsetHeight;
+      setRootProperty(
+        GLOBAL_RIBBON_CUSTOM_PROPERTY,
+        `${globalRibbonHeight}px`,
+        null,
+      );
+    }
+  }, [globalRibbon]);
+
+  const context = useMemo(
+    () => ({
+      showToast,
+      hideToast,
+      startLoading,
+      stopLoading,
+      setContextualSaveBar,
+      removeContextualSaveBar,
+    }),
+    [
+      hideToast,
+      removeContextualSaveBar,
+      setContextualSaveBar,
+      showToast,
+      startLoading,
+      stopLoading,
+    ],
+  );
+
+  const navClassName = classNames(
+    styles.Navigation,
+    showMobileNavigation && styles['Navigation-visible'],
+  );
+
+  const skipTarget = skipToContentTarget
+    ? (skipToContentTarget.current && skipToContentTarget.current.id) || ''
+    : APP_FRAME_MAIN_ANCHOR_TARGET;
+
+  const mobileNavHidden = isNavigationCollapsed && !showMobileNavigation;
+  const mobileNavShowing = isNavigationCollapsed && showMobileNavigation;
+  const tabIndex = mobileNavShowing ? 0 : -1;
+
+  const navigationMarkup = navigation ? (
+    <TrapFocus trapping={mobileNavShowing}>
+      <CSSTransition
+        findDOMNode={findNavigationNode}
+        appear={isNavigationCollapsed}
+        exit={isNavigationCollapsed}
+        in={showMobileNavigation}
+        timeout={durationSlow}
+        classNames={navTransitionClasses}
       >
-        {topBar}
+        <div
+          ref={navigationNode}
+          className={navClassName}
+          onKeyDown={handleNavKeydown}
+          id={APP_FRAME_NAV}
+          key="NavContent"
+          hidden={mobileNavHidden}
+        >
+          {navigation}
+          <button
+            type="button"
+            className={styles.NavigationDismiss}
+            onClick={handleNavigationDismiss}
+            aria-hidden={
+              mobileNavHidden ||
+              (!isNavigationCollapsed && !showMobileNavigation)
+            }
+            aria-label={i18n.translate(
+              'Polaris.Frame.Navigation.closeMobileNavigationLabel',
+            )}
+            tabIndex={tabIndex}
+          >
+            <Icon source={MobileCancelMajorMonotone} color="white" />
+          </button>
+        </div>
+      </CSSTransition>
+    </TrapFocus>
+  ) : null;
+
+  const loadingMarkup =
+    loadingStack > 0 ? (
+      <div className={styles.LoadingBar} id={APP_FRAME_LOADING_BAR}>
+        <Loading />
       </div>
     ) : null;
 
-    const globalRibbonMarkup = globalRibbon ? (
-      <div
-        className={styles.GlobalRibbonContainer}
-        ref={this.setGlobalRibbonContainer}
+  const contextualSaveBarMarkup = (
+    <CSSAnimation
+      in={showContextualSaveBar}
+      className={styles.ContextualSaveBar}
+      type={AnimationType.Fade}
+    >
+      <ContextualSaveBar {...contextualSaveBarProps} />
+    </CSSAnimation>
+  );
+
+  const topBarMarkup = topBar ? (
+    <div
+      className={styles.TopBar}
+      {...layer.props}
+      {...dataPolarisTopBar.props}
+      id={APP_FRAME_TOP_BAR}
+    >
+      {topBar}
+    </div>
+  ) : null;
+
+  const globalRibbonMarkup = globalRibbon ? (
+    <div className={styles.GlobalRibbonContainer} ref={globalRibbonContainer}>
+      {globalRibbon}
+    </div>
+  ) : null;
+
+  const skipClassName = classNames(styles.Skip, skipFocused && styles.focused);
+
+  const skipMarkup = (
+    <div className={skipClassName}>
+      <a
+        href={`#${skipTarget}`}
+        onFocus={forceTrueSkipFocused}
+        onBlur={forceFalseSkipFocused}
+        onClick={handleClick}
+        className={styles.SkipAnchor}
       >
-        {globalRibbon}
-      </div>
+        {i18n.translate('Polaris.Frame.skipToContent')}
+      </a>
+    </div>
+  );
+
+  const navigationAttributes = navigation
+    ? {
+        'data-has-navigation': true,
+      }
+    : {};
+
+  const frameClassName = classNames(
+    styles.Frame,
+    navigation && styles.hasNav,
+    topBar && styles.hasTopBar,
+  );
+
+  const navigationOverlayMarkup =
+    showMobileNavigation && isNavigationCollapsed ? (
+      <Backdrop
+        belowNavigation
+        onClick={handleNavigationDismiss}
+        onTouchStart={handleNavigationDismiss}
+      />
     ) : null;
 
-    const skipClassName = classNames(
-      styles.Skip,
-      skipFocused && styles.focused,
-    );
-
-    const skipTarget = skipToContentTarget
-      ? (skipToContentTarget.current && skipToContentTarget.current.id) || ''
-      : APP_FRAME_MAIN_ANCHOR_TARGET;
-
-    const skipMarkup = (
-      <div className={skipClassName}>
-        <a
-          href={`#${skipTarget}`}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
-          onClick={this.handleClick}
-          className={styles.SkipAnchor}
+  const skipToMainContentTarget = skipToContentTarget ? null : (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    <a
+      id={APP_FRAME_MAIN_ANCHOR_TARGET}
+      ref={skipToMainContentTargetNode}
+      tabIndex={-1}
+    />
+  );
+
+  return (
+    <FrameContext.Provider value={context}>
+      <div
+        className={frameClassName}
+        {...layer.props}
+        {...navigationAttributes}
+      >
+        {skipMarkup}
+        {topBarMarkup}
+        {navigationMarkup}
+        {contextualSaveBarMarkup}
+        {loadingMarkup}
+        {navigationOverlayMarkup}
+        <main
+          className={styles.Main}
+          id={APP_FRAME_MAIN}
+          data-has-global-ribbon={Boolean(globalRibbon)}
         >
-          {intl.translate('Polaris.Frame.skipToContent')}
-        </a>
+          {skipToMainContentTarget}
+          <div className={styles.Content}>{children}</div>
+        </main>
+        <ToastManager toastMessages={toastMessages} />
+        {globalRibbonMarkup}
       </div>
-    );
-
-    const navigationAttributes = navigation
-      ? {
-          'data-has-navigation': true,
-        }
-      : {};
-
-    const frameClassName = classNames(
-      styles.Frame,
-      navigation && styles.hasNav,
-      topBar && styles.hasTopBar,
-    );
-
-    const navigationOverlayMarkup =
-      showMobileNavigation && isNavigationCollapsed ? (
-        <Backdrop
-          belowNavigation
-          onClick={this.handleNavigationDismiss}
-          onTouchStart={this.handleNavigationDismiss}
-        />
-      ) : null;
-
-    const skipToMainContentTarget = skipToContentTarget ? null : (
-      // eslint-disable-next-line jsx-a11y/anchor-is-valid
-      <a
-        id={APP_FRAME_MAIN_ANCHOR_TARGET}
-        ref={this.skipToMainContentTargetNode}
-        tabIndex={-1}
-      />
-    );
-
-    const context = {
-      showToast: this.showToast,
-      hideToast: this.hideToast,
-      startLoading: this.startLoading,
-      stopLoading: this.stopLoading,
-      setContextualSaveBar: this.setContextualSaveBar,
-      removeContextualSaveBar: this.removeContextualSaveBar,
-    };
-
-    return (
-      <FrameContext.Provider value={context}>
-        <div
-          className={frameClassName}
-          {...layer.props}
-          {...navigationAttributes}
-        >
-          {skipMarkup}
-          {topBarMarkup}
-          {navigationMarkup}
-          {contextualSaveBarMarkup}
-          {loadingMarkup}
-          {navigationOverlayMarkup}
-          <main
-            className={styles.Main}
-            id={APP_FRAME_MAIN}
-            data-has-global-ribbon={Boolean(globalRibbon)}
-          >
-            {skipToMainContentTarget}
-            <div className={styles.Content}>{children}</div>
-          </main>
-          <ToastManager toastMessages={toastMessages} />
-          {globalRibbonMarkup}
-          <EventListener event="resize" handler={this.handleResize} />
-        </div>
-      </FrameContext.Provider>
-    );
-  }
-
-  private setGlobalRibbonHeight = () => {
-    const {globalRibbonContainer} = this;
-    if (globalRibbonContainer) {
-      this.setState(
-        {
-          globalRibbonHeight: globalRibbonContainer.offsetHeight,
-        },
-        this.setGlobalRibbonRootProperty,
-      );
-    }
-  };
-
-  private setGlobalRibbonRootProperty = () => {
-    const {globalRibbonHeight} = this.state;
-    setRootProperty(
-      GLOBAL_RIBBON_CUSTOM_PROPERTY,
-      `${globalRibbonHeight}px`,
-      null,
-    );
-  };
-
-  private showToast = (toast: ToastPropsWithID) => {
-    this.setState(({toastMessages}: State) => {
-      const hasToastById =
-        toastMessages.find(({id}) => id === toast.id) != null;
-      return {
-        toastMessages: hasToastById ? toastMessages : [...toastMessages, toast],
-      };
-    });
-  };
-
-  private hideToast = ({id}: ToastID) => {
-    this.setState(({toastMessages}: State) => {
-      return {
-        toastMessages: toastMessages.filter(({id: toastId}) => id !== toastId),
-      };
-    });
-  };
-
-  private setContextualSaveBar = (props: ContextualSaveBarProps) => {
-    const {showContextualSaveBar} = this.state;
-    this.contextualSaveBar = {...props};
-    if (showContextualSaveBar === true) {
-      this.forceUpdate();
-    } else {
-      this.setState({showContextualSaveBar: true});
-    }
-  };
-
-  private removeContextualSaveBar = () => {
-    this.contextualSaveBar = null;
-    this.setState({showContextualSaveBar: false});
-  };
-
-  private startLoading = () => {
-    this.setState(({loadingStack}: State) => ({
-      loadingStack: loadingStack + 1,
-    }));
-  };
-
-  private stopLoading = () => {
-    this.setState(({loadingStack}: State) => ({
-      loadingStack: Math.max(0, loadingStack - 1),
-    }));
-  };
-
-  private handleResize = () => {
-    if (this.props.globalRibbon) {
-      this.setGlobalRibbonHeight();
-    }
-  };
-
-  private handleFocus = () => {
-    this.setState({skipFocused: true});
-  };
-
-  private handleBlur = () => {
-    this.setState({skipFocused: false});
-  };
-
-  private handleClick = () => {
-    this.skipToMainContentTargetNode.current &&
-      this.skipToMainContentTargetNode.current.focus();
-  };
-
-  private handleNavigationDismiss = () => {
-    const {onNavigationDismiss} = this.props;
-    if (onNavigationDismiss != null) {
-      onNavigationDismiss();
-    }
-  };
-
-  private setGlobalRibbonContainer = (node: HTMLDivElement) => {
-    this.globalRibbonContainer = node;
-  };
-
-  private handleNavKeydown = (event: React.KeyboardEvent<HTMLElement>) => {
-    const {key} = event;
-
-    if (key === 'Escape') {
-      this.handleNavigationDismiss();
-    }
-  };
-
-  private findNavigationNode = () => {
-    return this.navigationNode.current;
-  };
+    </FrameContext.Provider>
+  );
 }
 
 const navTransitionClasses = {
@@ -409,7 +351,3 @@ const navTransitionClasses = {
   exit: classNames(styles['Navigation-exit']),
   exitActive: classNames(styles['Navigation-exitActive']),
 };
-
-// Use named export once withAppProvider is refactored away
-// eslint-disable-next-line import/no-default-export
-export default withAppProvider<FrameProps>()(Frame);
diff --git a/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx b/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx
index 607a528e89f..50d41dc08c1 100644
--- a/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx
+++ b/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {timer} from '@shopify/jest-dom-mocks';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Toast} from '../../Toast';
-import Frame from '../../../Frame';
+import {Frame} from '../../../Frame';
 import {ToastManager} from '..';
 
 window.matchMedia =
diff --git a/src/components/Frame/index.ts b/src/components/Frame/index.ts
index 5c0e5343228..2cbd6b0a2f0 100644
--- a/src/components/Frame/index.ts
+++ b/src/components/Frame/index.ts
@@ -1,6 +1,4 @@
-import Frame, {FrameProps} from './Frame';
-
-export {Frame, FrameProps};
+export {Frame, FrameProps} from './Frame';
 
 export {
   DEFAULT_TOAST_DURATION,
diff --git a/src/components/Frame/tests/Frame.test.tsx b/src/components/Frame/tests/Frame.test.tsx
index 7be9c2da9ad..657dc05ac58 100644
--- a/src/components/Frame/tests/Frame.test.tsx
+++ b/src/components/Frame/tests/Frame.test.tsx
@@ -8,7 +8,7 @@ import {
   ContextualSaveBar as PolarisContextualSavebar,
   Loading as PolarisLoading,
 } from 'components';
-import Frame from '../Frame';
+import {Frame} from '../Frame';
 import {
   ContextualSaveBar as FrameContextualSavebar,
   Loading as FrameLoading,