diff --git a/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js b/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js
index 26b69d37f0021..07060afa31dea 100644
--- a/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js
+++ b/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js
@@ -1,24 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 
-class MetaBoxVisibility extends Component {
-	componentDidMount() {
-		this.updateDOM();
-	}
-
-	componentDidUpdate( prevProps ) {
-		if ( this.props.isVisible !== prevProps.isVisible ) {
-			this.updateDOM();
-		}
-	}
-
-	updateDOM() {
-		const { id, isVisible } = this.props;
+export default function MetaBoxVisibility( { id } ) {
+	const isVisible = useSelect(
+		( select ) => {
+			return select( editorStore ).isEditorPanelEnabled(
+				`meta-box-${ id }`
+			);
+		},
+		[ id ]
+	);
 
+	useEffect( () => {
 		const element = document.getElementById( id );
 		if ( ! element ) {
 			return;
@@ -29,13 +26,7 @@ class MetaBoxVisibility extends Component {
 		} else {
 			element.classList.add( 'is-hidden' );
 		}
-	}
+	}, [ id, isVisible ] );
 
-	render() {
-		return null;
-	}
+	return null;
 }
-
-export default withSelect( ( select, { id } ) => ( {
-	isVisible: select( editorStore ).isEditorPanelEnabled( `meta-box-${ id }` ),
-} ) )( MetaBoxVisibility );