Element: Serialize memo-wrapped components instead of an empty string

packages/element/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `serialize`/`renderToString`: Render `memo`-wrapped components instead of serializing them to an empty string ([#81986](https://github.com/WordPress/gutenberg/pull/81986)).
+
 ### Internal
 
 -   Split tsconfig into a build project and a default dev project so dev files are type checked without publishing their declarations. ([#81514](https://github.com/WordPress/gutenberg/pull/81514))

packages/element/src/serialize.ts

@@ -31,7 +31,14 @@ import {
 	escapeAttribute,
 	isValidAttributeName,
 } from '@wordpress/escape-html';
-import { createContext, Fragment, StrictMode, forwardRef } from './react';
+import {
+	createContext,
+	createElement,
+	Fragment,
+	StrictMode,
+	forwardRef,
+	memo,
+} from './react';
 import RawHTML from './raw-html';
 
 /** @typedef {React.ReactElement} ReactElement */
@@ -71,6 +78,10 @@ const ForwardRef = forwardRef( () => {
 	return null;
 } );
 
+const Memo = memo( () => {
+	return null;
+} );
+
 /**
  * Valid attribute types.
  */
@@ -625,6 +636,15 @@ export function renderElement(
 				context,
 				legacyContext
 			);
+
+		case Memo.$$typeof:
+			// Memoization is meaningless for a static, one-off serialization,
+			// so the wrapped type is rendered directly.
+			return renderElement(
+				createElement( type.type, props ),
+				context,
+				legacyContext
+			);
 	}
 
 	return '';

packages/element/src/test/serialize.js

@@ -6,6 +6,7 @@ import {
 	Fragment,
 	StrictMode,
 	forwardRef,
+	memo,
 } from '../react';
 import RawHTML from '../raw-html';
 import serialize, {
@@ -86,6 +87,28 @@ describe( 'serialize()', () => {
 		expect( result ).toBe( '<div>test</div>' );
 	} );
 
+	it( 'should render with memo', () => {
+		const MemoizedComponent = memo( ( { value } ) => {
+			return <div>{ value }</div>;
+		} );
+
+		const result = serialize( <MemoizedComponent value="test" /> );
+
+		expect( result ).toBe( '<div>test</div>' );
+	} );
+
+	it( 'should render with memo wrapping forwardRef', () => {
+		const MemoizedComponent = memo(
+			forwardRef( () => {
+				return <div>test</div>;
+			} )
+		);
+
+		const result = serialize( <MemoizedComponent /> );
+
+		expect( result ).toBe( '<div>test</div>' );
+	} );
+
 	describe( 'empty attributes', () => {
 		it( 'should not render a null attribute value', () => {
 			const result = serialize( <video src={ undefined } /> );