diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js index 71d062a45899..c34d979ac293 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js @@ -15,7 +15,7 @@ let React; let ReactDOM; let ReactDOMServer; let forwardRef; -let pure; +let memo; let yieldedValues; let yieldValue; let clearYields; @@ -27,7 +27,7 @@ function initModules() { ReactDOM = require('react-dom'); ReactDOMServer = require('react-dom/server'); forwardRef = React.forwardRef; - pure = React.pure; + memo = React.memo; yieldedValues = []; yieldValue = value => { @@ -83,7 +83,7 @@ describe('ReactDOMServerIntegration', () => { expect(div.textContent).toBe('Test'); }); - describe('pure functional components', () => { + describe('memoized functional components', () => { beforeEach(() => { resetModules(); }); @@ -98,39 +98,39 @@ describe('ReactDOMServerIntegration', () => { } itRenders('basic render', async render => { - const PureCounter = pure(Counter); - const domNode = await render(); + const MemoCounter = memo(Counter); + const domNode = await render(); expect(domNode.textContent).toEqual('Count: 0'); }); itRenders('composition with forwardRef', async render => { const RefCounter = (props, ref) => ; - const PureRefCounter = pure(forwardRef(RefCounter)); + const MemoRefCounter = memo(forwardRef(RefCounter)); const ref = React.createRef(); ref.current = 0; - await render(); + await render(); expect(clearYields()).toEqual(['Count: 0']); }); itRenders('with comparator', async render => { - const PureCounter = pure(Counter, (oldProps, newProps) => false); - await render(); + const MemoCounter = memo(Counter, (oldProps, newProps) => false); + await render(); expect(clearYields()).toEqual(['Count: 0']); }); itRenders( 'comparator functions are not invoked on the server', async render => { - const PureCounter = React.pure(Counter, (oldProps, newProps) => { + const MemoCounter = React.memo(Counter, (oldProps, newProps) => { yieldValue( `Old count: ${oldProps.count}, New count: ${newProps.count}`, ); return oldProps.count === newProps.count; }); - await render(); + await render(); expect(clearYields()).toEqual(['Count: 0']); }, ); diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js index c45e56945283..6b482be43e37 100644 --- a/packages/react-dom/src/server/ReactPartialRenderer.js +++ b/packages/react-dom/src/server/ReactPartialRenderer.js @@ -39,7 +39,7 @@ import { REACT_PROVIDER_TYPE, REACT_CONTEXT_TYPE, REACT_LAZY_TYPE, - REACT_PURE_TYPE, + REACT_MEMO_TYPE, } from 'shared/ReactSymbols'; import { @@ -1002,7 +1002,7 @@ class ReactDOMServerRenderer { this.stack.push(frame); return ''; } - case REACT_PURE_TYPE: { + case REACT_MEMO_TYPE: { const element: ReactElement = ((nextChild: any): ReactElement); let nextChildren = [ React.createElement( diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js index ff251cbf68c7..4bed6cbaf992 100644 --- a/packages/react-reconciler/src/ReactFiber.js +++ b/packages/react-reconciler/src/ReactFiber.js @@ -35,7 +35,7 @@ import { Profiler, SuspenseComponent, FunctionComponent, - PureComponent, + MemoComponent, LazyComponent, } from 'shared/ReactWorkTags'; import getComponentName from 'shared/getComponentName'; @@ -57,7 +57,7 @@ import { REACT_CONTEXT_TYPE, REACT_CONCURRENT_MODE_TYPE, REACT_SUSPENSE_TYPE, - REACT_PURE_TYPE, + REACT_MEMO_TYPE, REACT_LAZY_TYPE, } from 'shared/ReactSymbols'; @@ -315,8 +315,8 @@ export function resolveLazyComponentTag(Component: Function): WorkTag { if ($$typeof === REACT_FORWARD_REF_TYPE) { return ForwardRef; } - if ($$typeof === REACT_PURE_TYPE) { - return PureComponent; + if ($$typeof === REACT_MEMO_TYPE) { + return MemoComponent; } } return IndeterminateComponent; @@ -470,8 +470,8 @@ export function createFiberFromTypeAndProps( case REACT_FORWARD_REF_TYPE: fiberTag = ForwardRef; break getTag; - case REACT_PURE_TYPE: - fiberTag = PureComponent; + case REACT_MEMO_TYPE: + fiberTag = MemoComponent; break getTag; case REACT_LAZY_TYPE: fiberTag = LazyComponent; diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index cd65c864edad..386bc16ba33b 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.js @@ -30,8 +30,8 @@ import { ContextConsumer, Profiler, SuspenseComponent, - PureComponent, - SimplePureComponent, + MemoComponent, + SimpleMemoComponent, LazyComponent, } from 'shared/ReactWorkTags'; import { @@ -231,7 +231,7 @@ function updateForwardRef( return workInProgress.child; } -function updatePureComponent( +function updateMemoComponent( current: Fiber | null, workInProgress: Fiber, Component: any, @@ -244,10 +244,10 @@ function updatePureComponent( if (isSimpleFunctionComponent(type) && Component.compare === null) { // If this is a plain function component without default props, // and with only the default shallow comparison, we upgrade it - // to a SimplePureComponent to allow fast path updates. - workInProgress.tag = SimplePureComponent; + // to a SimpleMemoComponent to allow fast path updates. + workInProgress.tag = SimpleMemoComponent; workInProgress.type = type; - return updateSimplePureComponent( + return updateSimpleMemoComponent( current, workInProgress, type, @@ -299,7 +299,7 @@ function updatePureComponent( return newChild; } -function updateSimplePureComponent( +function updateSimpleMemoComponent( current: Fiber | null, workInProgress: Fiber, Component: any, @@ -814,8 +814,8 @@ function mountLazyComponent( ); break; } - case PureComponent: { - child = updatePureComponent( + case MemoComponent: { + child = updateMemoComponent( null, workInProgress, Component, @@ -826,7 +826,7 @@ function mountLazyComponent( break; } default: { - // This message intentionally doesn't metion ForwardRef or PureComponent + // This message intentionally doesn't metion ForwardRef or MemoComponent // because the fact that it's a separate type of work is an // implementation detail. invariant( @@ -1612,11 +1612,11 @@ function beginWork( workInProgress, renderExpirationTime, ); - case PureComponent: { + case MemoComponent: { const type = workInProgress.type; const unresolvedProps = workInProgress.pendingProps; const resolvedProps = resolveDefaultProps(type.type, unresolvedProps); - return updatePureComponent( + return updateMemoComponent( current, workInProgress, type, @@ -1625,8 +1625,8 @@ function beginWork( renderExpirationTime, ); } - case SimplePureComponent: { - return updateSimplePureComponent( + case SimpleMemoComponent: { + return updateSimpleMemoComponent( current, workInProgress, workInProgress.type, diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js index 12069b9f919d..c0657661a125 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js @@ -34,8 +34,8 @@ import { Mode, Profiler, SuspenseComponent, - PureComponent, - SimplePureComponent, + MemoComponent, + SimpleMemoComponent, LazyComponent, } from 'shared/ReactWorkTags'; import {Placement, Ref, Update} from 'shared/ReactSideEffectTags'; @@ -540,7 +540,7 @@ function completeWork( break; case LazyComponent: break; - case SimplePureComponent: + case SimpleMemoComponent: case FunctionComponent: break; case ClassComponent: { @@ -715,7 +715,7 @@ function completeWork( break; case ContextConsumer: break; - case PureComponent: + case MemoComponent: break; default: invariant( diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js index 7faa68ce85ff..c8f4c2452300 100644 --- a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js @@ -555,13 +555,13 @@ describe('ReactDebugFiberPerf', () => { expect(getFlameChart()).toMatchSnapshot(); }); - it('supports pure', () => { - const PureFoo = React.pure(function Foo() { + it('supports memo', () => { + const MemoFoo = React.memo(function Foo() { return
; }); ReactNoop.render( - + , ); ReactNoop.flush(); diff --git a/packages/react-reconciler/src/__tests__/ReactPure-test.internal.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js similarity index 93% rename from packages/react-reconciler/src/__tests__/ReactPure-test.internal.js rename to packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js index 081e15cd034c..d6e1cba77c67 100644 --- a/packages/react-reconciler/src/__tests__/ReactPure-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js @@ -16,7 +16,7 @@ let React; let ReactFeatureFlags; let ReactNoop; -describe('pure', () => { +describe('memo', () => { beforeEach(() => { jest.resetModules(); ReactFeatureFlags = require('shared/ReactFeatureFlags'); @@ -38,22 +38,22 @@ describe('pure', () => { return {default: result}; } - // Tests should run against both the lazy and non-lazy versions of `pure`. + // Tests should run against both the lazy and non-lazy versions of `memo`. // To make the tests work for both versions, we wrap the non-lazy version in // a lazy function component. sharedTests('normal', (...args) => { - const Pure = React.pure(...args); + const Memo = React.memo(...args); function Indirection(props) { - return ; + return ; } return React.lazy(() => fakeImport(Indirection)); }); sharedTests('lazy', (...args) => { - const Pure = React.pure(...args); - return React.lazy(() => fakeImport(Pure)); + const Memo = React.memo(...args); + return React.lazy(() => fakeImport(Memo)); }); - function sharedTests(label, pure) { + function sharedTests(label, memo) { describe(`${label}`, () => { it('bails out on props equality', async () => { const {unstable_Suspense: Suspense} = React; @@ -61,7 +61,7 @@ describe('pure', () => { function Counter({count}) { return ; } - Counter = pure(Counter); + Counter = memo(Counter); ReactNoop.render( }> @@ -108,7 +108,7 @@ describe('pure', () => { const count = readContext(CountContext); return ; } - Counter = pure(Counter); + Counter = memo(Counter); class Parent extends React.Component { state = {count: 0}; @@ -147,7 +147,7 @@ describe('pure', () => { function Counter({count}) { return ; } - Counter = pure(Counter, (oldProps, newProps) => { + Counter = memo(Counter, (oldProps, newProps) => { ReactNoop.yield( `Old count: ${oldProps.count}, New count: ${newProps.count}`, ); @@ -192,7 +192,7 @@ describe('pure', () => { return ; } } - const Counter = pure(CounterInner); + const Counter = memo(CounterInner); ReactNoop.render( }> @@ -224,8 +224,8 @@ describe('pure', () => { }); it('warns if first argument is undefined', () => { - expect(() => pure()).toWarnDev( - 'pure: The first argument must be a component. Instead ' + + expect(() => memo()).toWarnDev( + 'memo: The first argument must be a component. Instead ' + 'received: undefined', {withoutStack: true}, ); diff --git a/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap b/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap index f330c1f2944d..6ce37872239c 100644 --- a/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap +++ b/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap @@ -410,7 +410,7 @@ exports[`ReactDebugFiberPerf supports portals 1`] = ` " `; -exports[`ReactDebugFiberPerf supports pure 1`] = ` +exports[`ReactDebugFiberPerf supports memo 1`] = ` "⚛ (Waiting for async callback... will force flush in 5250 ms) ⚛ (React Tree Reconciliation: Completed Root) diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js index 00bada86fb11..6a8996c609c6 100644 --- a/packages/react-test-renderer/src/ReactTestRenderer.js +++ b/packages/react-test-renderer/src/ReactTestRenderer.js @@ -27,8 +27,8 @@ import { Mode, ForwardRef, Profiler, - PureComponent, - SimplePureComponent, + MemoComponent, + SimpleMemoComponent, } from 'shared/ReactWorkTags'; import invariant from 'shared/invariant'; import ReactVersion from 'shared/ReactVersion'; @@ -167,7 +167,7 @@ function toTree(node: ?Fiber) { rendered: childrenToTree(node.child), }; case FunctionComponent: - case SimplePureComponent: + case SimpleMemoComponent: return { nodeType: 'component', type: node.type, @@ -192,7 +192,7 @@ function toTree(node: ?Fiber) { case Mode: case Profiler: case ForwardRef: - case PureComponent: + case MemoComponent: return childrenToTree(node.child); default: invariant( @@ -208,7 +208,7 @@ const validWrapperTypes = new Set([ ClassComponent, HostComponent, ForwardRef, - PureComponent, + MemoComponent, // Normally skipped, but used when there's more than one root child. HostRoot, ]); diff --git a/packages/react/src/React.js b/packages/react/src/React.js index c3d0eed50935..a1fa6f607bc2 100644 --- a/packages/react/src/React.js +++ b/packages/react/src/React.js @@ -26,7 +26,7 @@ import { import {createContext} from './ReactContext'; import {lazy} from './ReactLazy'; import forwardRef from './forwardRef'; -import pure from './pure'; +import memo from './memo'; import { createElementWithValidation, createFactoryWithValidation, @@ -50,7 +50,7 @@ const React = { createContext, forwardRef, lazy, - pure, + memo, Fragment: REACT_FRAGMENT_TYPE, StrictMode: REACT_STRICT_MODE_TYPE, diff --git a/packages/react/src/__tests__/forwardRef-test.js b/packages/react/src/__tests__/forwardRef-test.js index e7ef1ffeabbb..5bbcc86fd837 100644 --- a/packages/react/src/__tests__/forwardRef-test.js +++ b/packages/react/src/__tests__/forwardRef-test.js @@ -227,7 +227,7 @@ describe('forwardRef', () => { ); }); - it('should not bailout if forwardRef is not wrapped in pure', () => { + it('should not bailout if forwardRef is not wrapped in memo', () => { const Component = props =>
; let renderCount = 0; @@ -248,12 +248,12 @@ describe('forwardRef', () => { expect(renderCount).toBe(2); }); - it('should bailout if forwardRef is wrapped in pure', () => { + it('should bailout if forwardRef is wrapped in memo', () => { const Component = props =>
; let renderCount = 0; - const RefForwardingComponent = React.pure( + const RefForwardingComponent = React.memo( React.forwardRef((props, ref) => { renderCount++; return ; @@ -288,12 +288,12 @@ describe('forwardRef', () => { expect(renderCount).toBe(3); }); - it('should custom pure comparisons to compose', () => { + it('should custom memo comparisons to compose', () => { const Component = props =>
; let renderCount = 0; - const RefForwardingComponent = React.pure( + const RefForwardingComponent = React.memo( React.forwardRef((props, ref) => { renderCount++; return ; @@ -319,34 +319,34 @@ describe('forwardRef', () => { ReactNoop.flush(); expect(renderCount).toBe(2); - const ComposedPure = React.pure( + const ComposedMemo = React.memo( RefForwardingComponent, (o, p) => o.a === p.a && o.c === p.c, ); - ReactNoop.render(); + ReactNoop.render(); ReactNoop.flush(); expect(renderCount).toBe(3); // Changing just b no longer updates - ReactNoop.render(); + ReactNoop.render(); ReactNoop.flush(); expect(renderCount).toBe(3); // Changing just a and c updates - ReactNoop.render(); + ReactNoop.render(); ReactNoop.flush(); expect(renderCount).toBe(4); // Changing just c does not update - ReactNoop.render(); + ReactNoop.render(); ReactNoop.flush(); expect(renderCount).toBe(4); // Changing ref still rerenders const differentRef = React.createRef(); - ReactNoop.render(); + ReactNoop.render(); ReactNoop.flush(); expect(renderCount).toBe(5); diff --git a/packages/react/src/pure.js b/packages/react/src/memo.js similarity index 78% rename from packages/react/src/pure.js rename to packages/react/src/memo.js index dd981908470a..0fda3a8f67e0 100644 --- a/packages/react/src/pure.js +++ b/packages/react/src/memo.js @@ -5,12 +5,12 @@ * LICENSE file in the root directory of this source tree. */ -import {REACT_PURE_TYPE} from 'shared/ReactSymbols'; +import {REACT_MEMO_TYPE} from 'shared/ReactSymbols'; import isValidElementType from 'shared/isValidElementType'; import warningWithoutStack from 'shared/warningWithoutStack'; -export default function pure( +export default function memo( type: React$ElementType, compare?: (oldProps: Props, newProps: Props) => boolean, ) { @@ -18,14 +18,14 @@ export default function pure( if (!isValidElementType(type)) { warningWithoutStack( false, - 'pure: The first argument must be a component. Instead ' + + 'memo: The first argument must be a component. Instead ' + 'received: %s', type === null ? 'null' : typeof type, ); } } return { - $$typeof: REACT_PURE_TYPE, + $$typeof: REACT_MEMO_TYPE, type, compare: compare === undefined ? null : compare, }; diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js index 2b8211474c38..cc86ccbeeb72 100644 --- a/packages/shared/ReactSymbols.js +++ b/packages/shared/ReactSymbols.js @@ -41,7 +41,7 @@ export const REACT_FORWARD_REF_TYPE = hasSymbol export const REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1; -export const REACT_PURE_TYPE = hasSymbol ? Symbol.for('react.pure') : 0xead3; +export const REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3; export const REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4; const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator; diff --git a/packages/shared/ReactWorkTags.js b/packages/shared/ReactWorkTags.js index 9c03d889aa69..bb7bee12d9d5 100644 --- a/packages/shared/ReactWorkTags.js +++ b/packages/shared/ReactWorkTags.js @@ -42,6 +42,6 @@ export const ContextProvider = 10; export const ForwardRef = 11; export const Profiler = 12; export const SuspenseComponent = 13; -export const PureComponent = 14; -export const SimplePureComponent = 15; +export const MemoComponent = 14; +export const SimpleMemoComponent = 15; export const LazyComponent = 16; diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js index 0bd5c0f71b18..cbea431c8f7a 100644 --- a/packages/shared/getComponentName.js +++ b/packages/shared/getComponentName.js @@ -16,7 +16,7 @@ import { REACT_FORWARD_REF_TYPE, REACT_FRAGMENT_TYPE, REACT_PORTAL_TYPE, - REACT_PURE_TYPE, + REACT_MEMO_TYPE, REACT_PROFILER_TYPE, REACT_PROVIDER_TYPE, REACT_STRICT_MODE_TYPE, @@ -79,7 +79,7 @@ function getComponentName(type: mixed): string | null { return 'Context.Provider'; case REACT_FORWARD_REF_TYPE: return getWrappedName(type, type.render, 'ForwardRef'); - case REACT_PURE_TYPE: + case REACT_MEMO_TYPE: return getComponentName(type.type); case REACT_LAZY_TYPE: { const thenable: LazyComponent = (type: any); diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js index f662ce19fa69..d7296170cdc7 100644 --- a/packages/shared/isValidElementType.js +++ b/packages/shared/isValidElementType.js @@ -16,7 +16,7 @@ import { REACT_PROVIDER_TYPE, REACT_STRICT_MODE_TYPE, REACT_SUSPENSE_TYPE, - REACT_PURE_TYPE, + REACT_MEMO_TYPE, REACT_LAZY_TYPE, } from 'shared/ReactSymbols'; @@ -33,7 +33,7 @@ export default function isValidElementType(type: mixed) { (typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || - type.$$typeof === REACT_PURE_TYPE || + type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE))