Soft deprecate custom 'pure' HoC in favor of 'React.memo' (#57173)

* Block Supports: Try using 'memo' instead of 'pure'

* Replace more occurrences

* Deprecate 'pure' HoC

* Update native file

* Blame failed search

* Use toHaveWarnedWith

* Soft deprecate

* Add changelong entry

packages/block-editor/src/components/block-list/block.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useCallback, RawHTML, useContext } from '@wordpress/element';
+import { memo, useCallback, RawHTML, useContext } from '@wordpress/element';
 import {
 	getBlockType,
 	getSaveContent,
@@ -21,7 +21,7 @@ import {
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
-import { compose, pure } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { safeHTML } from '@wordpress/dom';
 
 /**
@@ -739,4 +739,4 @@ function BlockListBlockProvider( props ) {
 	);
 }
 
-export default pure( BlockListBlockProvider );
+export default memo( BlockListBlockProvider );

packages/block-editor/src/components/block-list/block.native.js

@@ -7,7 +7,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useState, useRef } from '@wordpress/element';
+import {
+	useCallback,
+	useMemo,
+	useState,
+	useRef,
+	memo,
+} from '@wordpress/element';
 import {
 	GlobalStylesContext,
 	getMergedGlobalStyles,
@@ -29,7 +35,7 @@ import {
 	withDispatch,
 	withSelect,
 } from '@wordpress/data';
-import { compose, ifCondition, pure } from '@wordpress/compose';
+import { compose, ifCondition } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -682,7 +688,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 } );
 
 export default compose(
-	pure,
+	memo,
 	applyWithSelect,
 	applyWithDispatch,
 	// Block is sometimes not mounted at the right time, causing it be undefined

packages/block-editor/src/components/block-preview/auto.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
+import { useResizeObserver, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { memo, useMemo } from '@wordpress/element';
 import { Disabled } from '@wordpress/components';
 
 /**
@@ -55,7 +55,7 @@ function ScaledBlockPreview( {
 	}, [ styles, additionalStyles ] );
 
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
-	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
+	MemoizedBlockList = MemoizedBlockList || memo( BlockList );
 
 	const scale = containerWidth / viewportWidth;
 	const aspectRatio = contentHeight

packages/block-editor/src/hooks/typography.native.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { pure } from '@wordpress/compose';
+import { memo } from '@wordpress/element';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -57,4 +57,4 @@ function TypographyPanelPure( { clientId, setAttributes, settings } ) {
 // We don't want block controls to re-render when typing inside a block. `pure`
 // will prevent re-renders unless props change, so only pass the needed props
 // and not the whole attributes object.
-export const TypographyPanel = pure( TypographyPanelPure );
+export const TypographyPanel = memo( TypographyPanelPure );

packages/block-editor/src/hooks/utils.js

@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo, useEffect, useId, useState } from '@wordpress/element';
+import { memo, useMemo, useEffect, useId, useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { createHigherOrderComponent, pure } from '@wordpress/compose';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -402,10 +402,10 @@ export function useBlockSettings( name, parentLayout ) {
 
 export function createBlockEditFilter( features ) {
 	// We don't want block controls to re-render when typing inside a block.
-	// `pure` will prevent re-renders unless props change, so only pass the
+	// `memo` will prevent re-renders unless props change, so only pass the
 	// needed props and not the whole attributes object.
 	features = features.map( ( settings ) => {
-		return { ...settings, Edit: pure( settings.edit ) };
+		return { ...settings, Edit: memo( settings.edit ) };
 	} );
 	const withBlockEditHooks = createHigherOrderComponent(
 		( OriginalBlockEdit ) => ( props ) => {
@@ -488,7 +488,7 @@ function BlockProps( { index, useBlockProps, setAllWrapperProps, ...props } ) {
 	return null;
 }
 
-const BlockPropsPure = pure( BlockProps );
+const BlockPropsPure = memo( BlockProps );
 
 export function createBlockListBlockFilter( features ) {
 	const withBlockListBlockHooks = createHigherOrderComponent(

packages/compose/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Deprecations
+
+-   The `pure` HoC has been deprecated. Use `memo` or `PureComponent` instead ([#57173](https://github.com/WordPress/gutenberg/pull/57173)).
+
 ## 6.26.0 (2024-01-10)
 
 ## 6.25.0 (2023-12-13)

packages/compose/README.md

@@ -141,6 +141,8 @@ _Related_
 
 ### pure
 
+> **Deprecated** Use `memo` or `PureComponent` instead.
+
 Given a component returns the enhanced component augmented with a component only re-rendering when its props/state change
 
 ### throttle

packages/compose/src/higher-order/pure/index.tsx

@@ -17,6 +17,8 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
 /**
  * Given a component returns the enhanced component augmented with a component
  * only re-rendering when its props/state change
+ *
+ * @deprecated Use `memo` or `PureComponent` instead.
  */
 const pure = createHigherOrderComponent( function < Props extends {} >(
 	WrappedComponent: ComponentType< Props >