Use class component for app registry

WordPress · Jul 9, 2021 · f392e04 · f392e04
1 parent 6099b36
commit f392e04
Showing 1 changed file with 23 additions and 25 deletions.
diff --git a/packages/element/src/react-platform.native.js b/packages/element/src/react-platform.native.js
@@ -12,36 +12,34 @@ import { applyFilters, doAction } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import { cloneElement } from './react';
-
-const registeredComponents = {};
-
-const render = ( element, id ) =>
-	AppRegistry.registerComponent( id, () => ( propsFromParent ) => {
-		// This callback can be called multiple times in development when a warning or error
-		// is triggered when executing code below so we have to prevent it.
-		// Reference: https://github.com/WordPress/gutenberg/issues/32882#issuecomment-868414379
-		// eslint-disable-next-line no-undef
-		if ( __DEV__ ) {
-			if ( registeredComponents[ id ] ) {
-				return;
-			}
-			registeredComponents[ id ] = true;
-		}
+import { Component, cloneElement } from './react';
+
+const render = ( element, id ) => {
+	class App extends Component {
+		constructor() {
+			super( ...arguments );
+
+			const parentProps = omit( this.props || {}, [ 'rootTag' ] );
 
-		const parentProps = omit( propsFromParent || {}, [ 'rootTag' ] );
+			doAction( 'native.pre-render', parentProps );
 
-		doAction( 'native.pre-render', parentProps );
+			this.filteredProps = applyFilters(
+				'native.block_editor_props',
+				parentProps
+			);
+		}
 
-		const filteredProps = applyFilters(
-			'native.block_editor_props',
-			parentProps
-		);
+		componentDidMount() {
+			doAction( 'native.render', this.filteredProps );
+		}
 
-		doAction( 'native.render', filteredProps );
+		render() {
+			return cloneElement( element, this.filteredProps );
+		}
+	}
 
-		return cloneElement( element, filteredProps );
-	} );
+	AppRegistry.registerComponent( id, () => App );
+};
 
 /**
  * Render a given element on Native.