React 19 codemod: apply defaultProps when rendering a memo component

packages/e2e-tests/plugins/react-18-compat-block/editor.js

@@ -1,6 +1,7 @@
 ( function () {
 	const { registerBlockType } = wp.blocks;
 	const { useBlockProps } = wp.blockEditor;
+	const { createElement, memo } = wp.element;
 
 	// The externalized React JSX runtime (the `react-jsx-runtime` script
 	// handle). When the React 19 experiment is enabled this is React 19's
@@ -89,6 +90,23 @@
 		label: 'Hello from defaultProps',
 	};
 
+	// The same, wrapped in `memo()`. React 18 resolved the inner component's
+	// `defaultProps` in `updateMemoComponent`, not at element creation, so no
+	// runtime ever wrote them into the element. All three ways of creating the
+	// element are exercised — the classic `createElement`, the externalized JSX
+	// runtime, and the bundled React 18 one — because the fix has to live in
+	// the reconciler to cover the last of them.
+	function MemoGreetingBase( props ) {
+		return jsx( 'span', {
+			className: props.className,
+			children: props.label,
+		} );
+	}
+	MemoGreetingBase.defaultProps = {
+		label: 'Hello from memo defaultProps',
+	};
+	const MemoGreeting = memo( MemoGreetingBase );
+
 	registerBlockType( 'test/react-18-compat-block', {
 		apiVersion: 3,
 		edit: function Edit() {
@@ -122,6 +140,26 @@
 					// The `defaultProps` component, created with the
 					// externalized React runtime.
 					jsx( Greeting, {}, 'greeting' ),
+					createElement( MemoGreeting, {
+						key: 'memo-greeting',
+						className: 'react-18-compat-block__memo-greeting',
+					} ),
+					jsx(
+						MemoGreeting,
+						{
+							className:
+								'react-18-compat-block__memo-greeting-jsx',
+						},
+						'memo-greeting-jsx'
+					),
+					jsxDEV(
+						MemoGreeting,
+						{
+							className:
+								'react-18-compat-block__memo-greeting-legacy',
+						},
+						'memo-greeting-legacy'
+					),
 				],
 			} );
 		},

test/e2e/specs/editor/plugins/react-18-compat-block.spec.js

@@ -2,8 +2,9 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 // This block deliberately exercises legacy React 18 patterns (a bundled React
 // 18 development JSX runtime that produces `Symbol.for( 'react.element' )`
-// elements, a function component relying on `defaultProps`, and the `inert`
-// attribute) while the editor runs on the externalized React 19 runtime.
+// elements, function components relying on `defaultProps` both plain and
+// wrapped in `memo()`, and the `inert` attribute) while the editor runs on the
+// externalized React 19 runtime.
 //
 // It is expected to FAIL until the React 19 compatibility layer can render
 // elements created by an older React runtime and restore `defaultProps`
@@ -46,6 +47,19 @@ test.describe( 'React 18 compatibility block (React 19 runtime)', () => {
 			block.locator( '.react-18-compat-block__greeting' )
 		).toHaveText( 'Hello from defaultProps' );
 
+		// `defaultProps` declared on the component inside a `memo()` wrapper
+		// are resolved too, whichever runtime created the element — including
+		// the bundled React 18 one, which never wrote them into the element.
+		await expect(
+			block.locator( '.react-18-compat-block__memo-greeting' )
+		).toHaveText( 'Hello from memo defaultProps' );
+		await expect(
+			block.locator( '.react-18-compat-block__memo-greeting-jsx' )
+		).toHaveText( 'Hello from memo defaultProps' );
+		await expect(
+			block.locator( '.react-18-compat-block__memo-greeting-legacy' )
+		).toHaveText( 'Hello from memo defaultProps' );
+
 		// `inert=''` attribute specified as string is rendered as `true` by a patched React 19 runtime.
 		const inertString = block.locator(
 			'.react-18-compat-block__inert-string'

tools/build-scripts/packages/build-vendors.mjs

@@ -10,6 +10,7 @@ import {
 	patchTransitionalSymbols,
 	patchCoerceRef,
 	patchInertAttribute,
+	patchMemoDefaultProps,
 } from './codemod-react-legacy-element.mjs';
 
 const __dirname = path.dirname( fileURLToPath( import.meta.url ) );
@@ -22,12 +23,14 @@ const WORKSPACE_DIR = path.resolve( __dirname, '..' );
 
 // Patchers that adapt React 19 to also accept legacy (React 17/18) elements.
 // The `react` core bundle only needs the element-symbol patch, while the
-// `react-dom` bundle additionally needs the DOM-only ref and `inert` patches.
+// `react-dom` bundle additionally needs the DOM-only ref and `inert` patches,
+// and the reconciler patch that restores `memo()` `defaultProps`.
 const patchReact = createPatcher( patchTransitionalSymbols );
 const patchReactDOM = createPatcher(
 	patchTransitionalSymbols,
 	patchCoerceRef,
-	patchInertAttribute
+	patchInertAttribute,
+	patchMemoDefaultProps
 );
 
 const requireFromWorkspace = createRequire(