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.

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

Opt into unsafe lifecycle warnings without async tree #12083

Merged
merged 13 commits into from Jan 25, 2018
@@ -26,15 +26,21 @@ import {
CallComponent,
ReturnComponent,
Fragment,
Mode,
} from 'shared/ReactTypeOfWork';
import getComponentName from 'shared/getComponentName';

import {NoWork} from './ReactFiberExpirationTime';
import {NoContext, AsyncUpdates} from './ReactTypeOfInternalContext';
import {
NoContext,
AsyncUpdates,
StrictMode,
} from './ReactTypeOfInternalContext';
import {
REACT_FRAGMENT_TYPE,
REACT_RETURN_TYPE,
REACT_CALL_TYPE,
REACT_STRICT_MODE_TYPE,
} from 'shared/ReactSymbols';

let hasBadMapPolyfill;
@@ -293,7 +299,7 @@ export function createWorkInProgress(
}

export function createHostRootFiber(isAsync): Fiber {
const internalContextTag = isAsync ? AsyncUpdates : NoContext;
const internalContextTag = isAsync ? AsyncUpdates | StrictMode : NoContext;
return createFiber(HostRoot, null, null, internalContextTag);
}

@@ -333,6 +339,15 @@ export function createFiberFromElement(
expirationTime,
key,
);
case REACT_STRICT_MODE_TYPE:
fiber = createFiber(
Mode,
pendingProps,
key,
internalContextTag | StrictMode,
);
fiber.type = REACT_STRICT_MODE_TYPE;
break;
case REACT_CALL_TYPE:
fiber = createFiber(
CallComponent,
@@ -26,6 +26,7 @@ import {
CallHandlerPhase,
ReturnComponent,
Fragment,
Mode,
} from 'shared/ReactTypeOfWork';
import {
PerformedWork,
@@ -160,6 +161,22 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
return workInProgress.child;
}

function updateMode(current, workInProgress) {
const nextChildren = workInProgress.pendingProps.children;
if (hasContextChanged()) {
// Normally we can bail out on props equality but if context has changed
// we don't do the bailout and we have to reuse existing props instead.
} else if (
nextChildren === null ||
workInProgress.memoizedProps === nextChildren
) {
return bailoutOnAlreadyFinishedWork(current, workInProgress);
}
reconcileChildren(current, workInProgress, nextChildren);
memoizeProps(workInProgress, nextChildren);
return workInProgress.child;
}

function markRef(current: Fiber | null, workInProgress: Fiber) {
const ref = workInProgress.ref;
if (ref !== null && (!current || current.ref !== ref)) {
@@ -777,6 +794,8 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
);
case Fragment:
return updateFragment(current, workInProgress);
case Mode:
return updateMode(current, workInProgress);
default:
invariant(
false,
@@ -16,7 +16,7 @@ import {
enableAsyncSubtreeAPI,
warnAboutDeprecatedLifecycles,
} from 'shared/ReactFeatureFlags';
import ReactDebugAsyncWarnings from './ReactDebugAsyncWarnings';
import ReactStrictModeWarnings from './ReactStrictModeWarnings';
import {isMounted} from 'react-reconciler/reflection';
import * as ReactInstanceMap from 'shared/ReactInstanceMap';
import emptyObject from 'fbjs/lib/emptyObject';
@@ -26,7 +26,7 @@ import invariant from 'fbjs/lib/invariant';
import warning from 'fbjs/lib/warning';

import {startPhaseTimer, stopPhaseTimer} from './ReactDebugFiberPerf';
import {AsyncUpdates} from './ReactTypeOfInternalContext';
import {AsyncUpdates, StrictMode} from './ReactTypeOfInternalContext';
import {
cacheContext,
getMaskedContext,
@@ -639,20 +639,20 @@ export default function(
instance.refs = emptyObject;
instance.context = getMaskedContext(workInProgress, unmaskedContext);

if (
enableAsyncSubtreeAPI &&
workInProgress.type != null &&
workInProgress.type.prototype != null &&
workInProgress.type.prototype.unstable_isAsyncReactComponent === true
) {
workInProgress.internalContextTag |= AsyncUpdates;
if (workInProgress.type != null && workInProgress.type.prototype != null) {
const prototype = workInProgress.type.prototype;

if (enableAsyncSubtreeAPI) {
if (prototype.unstable_isAsyncReactComponent === true) {
workInProgress.internalContextTag |= AsyncUpdates;
workInProgress.internalContextTag |= StrictMode;
}
}
}

if (__DEV__) {
// If we're inside of an async sub-tree,
// Warn about any unsafe lifecycles on this class component.
if (workInProgress.internalContextTag & AsyncUpdates) {
ReactDebugAsyncWarnings.recordLifecycleWarnings(
if (workInProgress.internalContextTag & StrictMode) {
ReactStrictModeWarnings.recordLifecycleWarnings(
workInProgress,
instance,
);
@@ -31,6 +31,7 @@ import {
CallHandlerPhase,
ReturnComponent,
Fragment,
Mode,
} from 'shared/ReactTypeOfWork';
import {Placement, Ref, Update} from 'shared/ReactTypeOfSideEffect';
import invariant from 'fbjs/lib/invariant';
@@ -576,6 +577,8 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
return null;
case Fragment:
return null;
case Mode:
return null;
case HostPortal:
popHostContainer(workInProgress);
updateHostContainer(workInProgress);
@@ -16,7 +16,7 @@ import type {ExpirationTime} from './ReactFiberExpirationTime';
import {getStackAddendumByWorkInProgressFiber} from 'shared/ReactFiberComponentTreeHook';
import ReactErrorUtils from 'shared/ReactErrorUtils';
import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';
import ReactDebugAsyncWarnings from './ReactDebugAsyncWarnings';
import ReactStrictModeWarnings from './ReactStrictModeWarnings';
import {
PerformedWork,
Placement,
@@ -312,7 +312,7 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(

function commitAllLifeCycles() {
if (__DEV__) {
ReactDebugAsyncWarnings.flushPendingAsyncWarnings();
ReactStrictModeWarnings.flushPendingAsyncWarnings();
}

while (nextEffect !== null) {
@@ -657,7 +657,7 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(

function performFailedUnitOfWork(workInProgress: Fiber): Fiber | null {
if (__DEV__) {
ReactDebugAsyncWarnings.discardPendingWarnings();
ReactStrictModeWarnings.discardPendingWarnings();
}

// The current, flushed, state of this fiber is the alternate.
@@ -11,7 +11,7 @@ import type {Fiber} from './ReactFiber';

import getComponentName from 'shared/getComponentName';
import {getStackAddendumByWorkInProgressFiber} from 'shared/ReactFiberComponentTreeHook';
import {AsyncUpdates} from './ReactTypeOfInternalContext';
import {StrictMode} from './ReactTypeOfInternalContext';
import warning from 'fbjs/lib/warning';

type LIFECYCLE =
@@ -21,7 +21,7 @@ type LIFECYCLE =
type LifecycleToComponentsMap = {[lifecycle: LIFECYCLE]: Array<Fiber>};
type FiberToLifecycleMap = Map<Fiber, LifecycleToComponentsMap>;

const ReactDebugAsyncWarnings = {
const ReactStrictModeWarnings = {
discardPendingWarnings(): void {},
flushPendingAsyncWarnings(): void {},
recordLifecycleWarnings(fiber: Fiber, instance: any): void {},
@@ -39,13 +39,13 @@ if (__DEV__) {
// Tracks components we have already warned about.
const didWarnSet = new Set();

ReactDebugAsyncWarnings.discardPendingWarnings = () => {
ReactStrictModeWarnings.discardPendingWarnings = () => {
pendingWarningsMap = new Map();
};

ReactDebugAsyncWarnings.flushPendingAsyncWarnings = () => {
ReactStrictModeWarnings.flushPendingAsyncWarnings = () => {
((pendingWarningsMap: any): FiberToLifecycleMap).forEach(
(lifecycleWarningsMap, asyncRoot) => {
(lifecycleWarningsMap, strictRoot) => {
const lifecyclesWarningMesages = [];

Object.keys(lifecycleWarningsMap).forEach(lifecycle => {
@@ -71,17 +71,17 @@ if (__DEV__) {
});

if (lifecyclesWarningMesages.length > 0) {
const asyncRootComponentStack = getStackAddendumByWorkInProgressFiber(
asyncRoot,
const strictRootComponentStack = getStackAddendumByWorkInProgressFiber(
strictRoot,
);

warning(
false,
'Unsafe lifecycle methods were found within the following async tree:%s' +
'Unsafe lifecycle methods were found within a strict-mode tree:%s' +
'\n\n%s' +
'\n\nLearn more about this warning here:' +
'\nhttps://fb.me/react-async-component-lifecycle-hooks',
asyncRootComponentStack,
'\nhttps://fb.me/react-strict-mode-warnings',
strictRootComponentStack,
lifecyclesWarningMesages.join('\n\n'),
);
}
@@ -91,25 +91,25 @@ if (__DEV__) {
pendingWarningsMap = new Map();
};

const getAsyncRoot = (fiber: Fiber): Fiber => {
let maybeAsyncRoot = null;
const getStrictRoot = (fiber: Fiber): Fiber => {
let maybeStrictRoot = null;

while (fiber !== null) {
if (fiber.internalContextTag & AsyncUpdates) {
maybeAsyncRoot = fiber;
if (fiber.internalContextTag & StrictMode) {
maybeStrictRoot = fiber;
}

fiber = fiber.return;
}

return maybeAsyncRoot;
return maybeStrictRoot;
};

ReactDebugAsyncWarnings.recordLifecycleWarnings = (
ReactStrictModeWarnings.recordLifecycleWarnings = (
fiber: Fiber,
instance: any,
) => {
const asyncRoot = getAsyncRoot(fiber);
const strictRoot = getStrictRoot(fiber);

// Dedup strategy: Warn once per component.
// This is difficult to track any other way since component names
@@ -121,16 +121,16 @@ if (__DEV__) {
}

let warningsForRoot;
if (!pendingWarningsMap.has(asyncRoot)) {
if (!pendingWarningsMap.has(strictRoot)) {
warningsForRoot = {
UNSAFE_componentWillMount: [],
UNSAFE_componentWillReceiveProps: [],
UNSAFE_componentWillUpdate: [],
};

pendingWarningsMap.set(asyncRoot, warningsForRoot);
pendingWarningsMap.set(strictRoot, warningsForRoot);
} else {
warningsForRoot = pendingWarningsMap.get(asyncRoot);
warningsForRoot = pendingWarningsMap.get(strictRoot);
}

const unsafeLifecycles = [];
@@ -163,4 +163,4 @@ if (__DEV__) {
};
}

export default ReactDebugAsyncWarnings;
export default ReactStrictModeWarnings;
@@ -9,5 +9,6 @@

export type TypeOfInternalContext = number;

export const NoContext = 0;
export const AsyncUpdates = 1;
export const NoContext = 0b00000000;
export const AsyncUpdates = 0b00000001;
export const StrictMode = 0b00000010;
@@ -7,9 +7,9 @@

import assign from 'object-assign';
import ReactVersion from 'shared/ReactVersion';
import {REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
import {REACT_FRAGMENT_TYPE, REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';

import {Component, PureComponent, AsyncComponent} from './ReactBaseClasses';
import {AsyncComponent, Component, PureComponent} from './ReactBaseClasses';
import {forEach, map, count, toArray, only} from './ReactChildren';
import ReactCurrentOwner from './ReactCurrentOwner';
import {
@@ -39,6 +39,7 @@ const React = {
unstable_AsyncComponent: AsyncComponent,

Fragment: REACT_FRAGMENT_TYPE,
StrictMode: REACT_STRICT_MODE_TYPE,

createElement: __DEV__ ? createElementWithValidation : createElement,
cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement,
@@ -117,34 +117,32 @@ if (__DEV__) {
}
}

function ComponentDummy() {}
ComponentDummy.prototype = Component.prototype;

/**
* Base class helpers for the updating state of a component.
* Convenience component with default shallow equality check for sCU.
*/
function PureComponent(props, context, updater) {
// Duplicated from Component.
this.props = props;
this.context = context;
this.refs = emptyObject;
// We initialize the default updater but the real one gets injected by the
// renderer.
this.updater = updater || ReactNoopUpdateQueue;
}

function ComponentDummy() {}
ComponentDummy.prototype = Component.prototype;
const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;
// Avoid an extra prototype jump for these methods.
Object.assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;

/**
* Special component type that opts subtree into async rendering mode.
*/
function AsyncComponent(props, context, updater) {
// Duplicated from Component.
this.props = props;
this.context = context;
this.refs = emptyObject;
// We initialize the default updater but the real one gets injected by the
// renderer.
this.updater = updater || ReactNoopUpdateQueue;
}

@@ -157,4 +155,4 @@ asyncComponentPrototype.render = function() {
return this.props.children;
};

export {Component, PureComponent, AsyncComponent};
export {AsyncComponent, Component, PureComponent};
@@ -15,7 +15,11 @@
import lowPriorityWarning from 'shared/lowPriorityWarning';
import describeComponentFrame from 'shared/describeComponentFrame';
import getComponentName from 'shared/getComponentName';
import {getIteratorFn, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
import {
getIteratorFn,
REACT_FRAGMENT_TYPE,
REACT_STRICT_MODE_TYPE,
} from 'shared/ReactSymbols';
import checkPropTypes from 'prop-types/checkPropTypes';
import warning from 'fbjs/lib/warning';

@@ -282,7 +286,8 @@ export function createElementWithValidation(type, props, children) {
typeof type === 'string' ||
typeof type === 'function' ||
// Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
type === REACT_FRAGMENT_TYPE;
type === REACT_FRAGMENT_TYPE ||
type === REACT_STRICT_MODE_TYPE;

// We warn in this case but don't throw. We expect the element creation to
// succeed and there will likely be errors in render.
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.