diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index af96f0e3483d1..7690386764f6c 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/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 ); diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index c4f86cfe25a42..1c0de681bd4c2 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/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 diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js index 8972370cac689..b4fa5e27b072e 100644 --- a/packages/block-editor/src/components/block-preview/auto.js +++ b/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 diff --git a/packages/block-editor/src/hooks/typography.native.js b/packages/block-editor/src/hooks/typography.native.js index d8cbf71d84e13..f0e9c9c10913d 100644 --- a/packages/block-editor/src/hooks/typography.native.js +++ b/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 ); diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index cd660c85826c2..e63029e4e34e8 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/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( diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md index 25ea99778733f..54ff6a16252e3 100644 --- a/packages/compose/CHANGELOG.md +++ b/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) diff --git a/packages/compose/README.md b/packages/compose/README.md index ce393f2b5fd18..7eb70a7300f07 100644 --- a/packages/compose/README.md +++ b/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 diff --git a/packages/compose/src/higher-order/pure/index.tsx b/packages/compose/src/higher-order/pure/index.tsx index 65684738b708a..38a85a5eebe9a 100644 --- a/packages/compose/src/higher-order/pure/index.tsx +++ b/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 >