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
@@ -30,7 +30,11 @@ import {
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,
@@ -293,7 +297,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);
}

@@ -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,23 @@ 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;
}
}

if (prototype.__reactStrictMode === true) {

This comment has been minimized.

Copy link
@sebmarkbage

sebmarkbage Jan 25, 2018

Member

This seems like it is not necessary anymore.

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,
);
@@ -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;
@@ -9,7 +9,12 @@ import assign from 'object-assign';
import ReactVersion from 'shared/ReactVersion';
import {REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';

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

Component,
PureComponent,
StrictMode,
unstable_AsyncComponent: AsyncComponent,

Fragment: REACT_FRAGMENT_TYPE,
@@ -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;
}

@@ -153,8 +151,30 @@ asyncComponentPrototype.constructor = AsyncComponent;
// Avoid an extra prototype jump for these methods.
Object.assign(asyncComponentPrototype, Component.prototype);
asyncComponentPrototype.unstable_isAsyncReactComponent = true;
asyncComponentPrototype.__reactStrictMode = true;
asyncComponentPrototype.render = function() {
return this.props.children;
};

export {Component, PureComponent, AsyncComponent};
/**
* Special component type that enables forward-looking, advanced warnings.
* For examples, it detects async-unsafe lifecycles (without actually enabling async mode).
* It can also detect render-phase side effects by double-invoking certain methods.
*/
function StrictMode(props, context, updater) {

This comment has been minimized.

Copy link
@sebmarkbage

sebmarkbage Jan 25, 2018

Member

We can remove this now.

This comment has been minimized.

Copy link
@bvaughn

bvaughn Jan 25, 2018

Author Contributor

Yeah, this was the silly oversight ;)

this.props = props;
this.context = context;
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;
}

const strictModePrototype = (StrictMode.prototype = new ComponentDummy());
strictModePrototype.constructor = StrictMode;
// Avoid an extra prototype jump for these methods.
Object.assign(strictModePrototype, Component.prototype);
strictModePrototype.__reactStrictMode = true;
strictModePrototype.render = function() {
return this.props.children;
};

export {AsyncComponent, Component, PureComponent, StrictMode};
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.