Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Jan 19, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3265f61
Block Supports: Try using 'memo' instead of 'pure'
Mamaduka Dec 18, 2023
67e3a46
Replace more occurrences
Mamaduka Dec 19, 2023
7369cfa
Deprecate 'pure' HoC
Mamaduka Dec 19, 2023
2304b82
Update native file
Mamaduka Dec 19, 2023
bbb678c
Blame failed search
Mamaduka Dec 19, 2023
ad3c8a2
Use toHaveWarnedWith
Mamaduka Dec 22, 2023
044154f
Soft deprecate
Mamaduka Jan 19, 2024
fc8f53a
Add changelong entry
Mamaduka Jan 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-list/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';

/**
Expand Down Expand Up @@ -739,4 +739,4 @@ function BlockListBlockProvider( props ) {
);
}

export default pure( BlockListBlockProvider );
export default memo( BlockListBlockProvider );
12 changes: 9 additions & 3 deletions packages/block-editor/src/components/block-list/block.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-preview/auto.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

/**
Expand Down Expand Up @@ -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 );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, this feels super weird! Does this even work? :D

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think so 😅 there is even a Babel plugin that applies similar optimizations - https://babeljs.io/docs/babel-plugin-transform-react-constant-elements.html

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was marked as an error by the new eslint-plugin-react-compiler plugin - https://github.com/WordPress/gutenberg/actions/runs/9158471368/job/25176908344?pr=61788#step:5:86.


const scale = containerWidth / viewportWidth;
const aspectRatio = contentHeight
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/hooks/typography.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 );
10 changes: 5 additions & 5 deletions packages/block-editor/src/hooks/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -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 ) => {
Expand Down Expand Up @@ -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(
Expand Down
4 changes: 4 additions & 0 deletions packages/compose/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 2 additions & 0 deletions packages/compose/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,8 @@ _Related_

### pure

> **Deprecated** Use `memo` or `PureComponent` instead.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we make it clear that memo is from @wordpress/element or react?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't find the issue, but I remember there was a talk of allowing imports from react. So folks can decide that for themself.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, we don't expose PureComponent at all in @wordpress/element, do we? So it can be confusing to mention it in the first place.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only reason the PureComponent was omitted was because of this HoC. See #33674 (comment).

Mamaduka marked this conversation as resolved.
Show resolved Hide resolved

Given a component returns the enhanced component augmented with a component only re-rendering when its props/state change

### throttle
Expand Down
2 changes: 2 additions & 0 deletions packages/compose/src/higher-order/pure/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above.

*/
const pure = createHigherOrderComponent( function < Props extends {} >(
WrappedComponent: ComponentType< Props >
Expand Down
Loading