diff --git a/packages/interface/src/components/fullscreen-mode/index.js b/packages/interface/src/components/fullscreen-mode/index.js
index fc3079b1d1434..e9611b9c6e368 100644
--- a/packages/interface/src/components/fullscreen-mode/index.js
+++ b/packages/interface/src/components/fullscreen-mode/index.js
@@ -1,51 +1,41 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-
-export class FullscreenMode extends Component {
-	componentDidMount() {
-		this.isSticky = false;
-		this.sync();
+import { useEffect } from '@wordpress/element';
 
+const FullscreenMode = ( { isActive } ) => {
+	useEffect( () => {
+		let isSticky = false;
 		// `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes
 		// `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled
 		// even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as
 		// a consequence of the FullscreenMode setup
 		if ( document.body.classList.contains( 'sticky-menu' ) ) {
-			this.isSticky = true;
+			isSticky = true;
 			document.body.classList.remove( 'sticky-menu' );
 		}
-	}
-
-	componentWillUnmount() {
-		if ( this.isSticky ) {
-			document.body.classList.add( 'sticky-menu' );
-		}
 
-		if ( this.props.isActive ) {
-			document.body.classList.remove( 'is-fullscreen-mode' );
-		}
-	}
-
-	componentDidUpdate( prevProps ) {
-		if ( this.props.isActive !== prevProps.isActive ) {
-			this.sync();
-		}
-	}
+		return () => {
+			if ( isSticky ) {
+				document.body.classList.add( 'sticky-menu' );
+			}
+		};
+	}, [] );
 
-	sync() {
-		const { isActive } = this.props;
+	useEffect( () => {
 		if ( isActive ) {
 			document.body.classList.add( 'is-fullscreen-mode' );
 		} else {
 			document.body.classList.remove( 'is-fullscreen-mode' );
 		}
-	}
 
-	render() {
-		return null;
-	}
-}
+		return () => {
+			if ( isActive ) {
+				document.body.classList.remove( 'is-fullscreen-mode' );
+			}
+		};
+	}, [ isActive ] );
 
+	return null;
+};
 export default FullscreenMode;
diff --git a/packages/interface/src/components/fullscreen-mode/test/index.js b/packages/interface/src/components/fullscreen-mode/test/index.js
index 06f49ec16644d..35d889a9ad521 100644
--- a/packages/interface/src/components/fullscreen-mode/test/index.js
+++ b/packages/interface/src/components/fullscreen-mode/test/index.js
@@ -1,25 +1,26 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-
+import { act, create } from 'react-test-renderer';
 /**
  * Internal dependencies
  */
-import { FullscreenMode } from '..';
+import FullscreenMode from '..';
 
 describe( 'FullscreenMode', () => {
 	it( 'fullscreen mode to be added to document body when active', () => {
-		shallow( <FullscreenMode isActive={ true } /> );
-
+		act( () => {
+			create( <FullscreenMode isActive={ true } /> );
+		} );
 		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
 			true
 		);
 	} );
 
 	it( 'fullscreen mode not to be added to document body when active', () => {
-		shallow( <FullscreenMode isActive={ false } /> );
-
+		act( () => {
+			create( <FullscreenMode isActive={ false } /> );
+		} );
 		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
 			false
 		);
@@ -27,9 +28,9 @@ describe( 'FullscreenMode', () => {
 
 	it( 'sticky-menu to be removed from the body class if present', () => {
 		document.body.classList.add( 'sticky-menu' );
-
-		shallow( <FullscreenMode isActive={ false } /> );
-
+		act( () => {
+			create( <FullscreenMode isActive={ false } /> );
+		} );
 		expect( document.body.classList.contains( 'sticky-menu' ) ).toBe(
 			false
 		);
@@ -37,10 +38,13 @@ describe( 'FullscreenMode', () => {
 
 	it( 'sticky-menu to be restored when component unmounted and originally present', () => {
 		document.body.classList.add( 'sticky-menu' );
-
-		const mode = shallow( <FullscreenMode isActive={ false } /> );
-		mode.unmount();
-
+		let mode;
+		act( () => {
+			mode = create( <FullscreenMode isActive={ false } /> );
+		} );
+		act( () => {
+			mode.unmount();
+		} );
 		expect( document.body.classList.contains( 'sticky-menu' ) ).toBe(
 			true
 		);
@@ -51,15 +55,18 @@ describe( 'FullscreenMode', () => {
 		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
 			false
 		);
-
-		const mode = shallow( <FullscreenMode isActive /> );
-
+		let mode;
+		act( () => {
+			mode = create( <FullscreenMode isActive /> );
+		} );
 		// present after mounting with `isActive`
 		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
 			true
 		);
 
-		mode.unmount();
+		act( () => {
+			mode.unmount();
+		} );
 
 		// removed after unmounting
 		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(