0% found this document useful (0 votes)

185 views74 pages

React Fiber Begin Work

This document defines types and constants used in React fiber reconciliation. It imports types from other React files and defines error objects, booleans to track warnings, and reconciliation functions like reconcileChildren that handles mounting and updating child fibers.

Uploaded by

mahoraga002

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

185 views74 pages

React Fiber Begin Work

Uploaded by

mahoraga002

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

/**

* Copyright (c) Meta Platforms, Inc. and affiliates.

*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

import type {
ReactProviderType,
ReactContext,
ReactNodeList,
} from 'shared/ReactTypes';
import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
import type {Fiber, FiberRoot} from './ReactInternalTypes';
import type {TypeOfMode} from './ReactTypeOfMode';
import type {Lanes, Lane} from './ReactFiberLane';
import type {
SuspenseState,
SuspenseListRenderState,
SuspenseListTailMode,
} from './ReactFiberSuspenseComponent';
import type {SuspenseContext} from './ReactFiberSuspenseContext';
import type {
OffscreenProps,
OffscreenState,
OffscreenQueue,
OffscreenInstance,
} from './ReactFiberOffscreenComponent';
import {OffscreenDetached} from './ReactFiberOffscreenComponent';
import type {
Cache,
CacheComponentState,
SpawnedCachePool,
} from './ReactFiberCacheComponent';
import type {UpdateQueue} from './ReactFiberClassUpdateQueue';
import type {RootState} from './ReactFiberRoot';
import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';
import type {TransitionStatus} from './ReactFiberConfig';
import type {Hook} from './ReactFiberHooks';

import checkPropTypes from 'shared/checkPropTypes';

import {
markComponentRenderStarted,
markComponentRenderStopped,
setIsStrictModeForDevtools,
} from './ReactFiberDevToolsHook';
import {
IndeterminateComponent,
FunctionComponent,
ClassComponent,
HostRoot,
HostComponent,
HostHoistable,
HostSingleton,
HostText,
HostPortal,
ForwardRef,
Fragment,
Mode,
ContextProvider,
ContextConsumer,
Profiler,
SuspenseComponent,
SuspenseListComponent,
MemoComponent,
SimpleMemoComponent,
LazyComponent,
IncompleteClassComponent,
ScopeComponent,
OffscreenComponent,
LegacyHiddenComponent,
CacheComponent,
TracingMarkerComponent,
} from './ReactWorkTags';
import {
NoFlags,
PerformedWork,
Placement,
Hydrating,
ContentReset,
DidCapture,
Update,
Ref,
RefStatic,
ChildDeletion,
ForceUpdateForLegacySuspense,
StaticMask,
ShouldCapture,
ForceClientRender,
Passive,
} from './ReactFiberFlags';
import ReactSharedInternals from 'shared/ReactSharedInternals';
import {
debugRenderPhaseSideEffectsForStrictMode,
disableLegacyContext,
disableModulePatternComponents,
enableProfilerCommitHooks,
enableProfilerTimer,
enableScopeAPI,
enableCache,
enableLazyContextPropagation,
enableSchedulingProfiler,
enableTransitionTracing,
enableLegacyHidden,
enableCPUSuspense,
enableFloat,
enableHostSingletons,
enableFormActions,
enableAsyncActions,
enablePostpone,
} from 'shared/ReactFeatureFlags';
import isArray from 'shared/isArray';
import shallowEqual from 'shared/shallowEqual';
import getComponentNameFromFiber from
'react-reconciler/src/getComponentNameFromFiber';
import getComponentNameFromType from 'shared/getComponentNameFromType';
import ReactStrictModeWarnings from './ReactStrictModeWarnings';
import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols';
import {
getCurrentFiberOwnerNameInDevOrNull,
setIsRendering,
} from './ReactCurrentFiber';
import {
resolveFunctionForHotReloading,
resolveForwardRefForHotReloading,
resolveClassForHotReloading,
} from './ReactFiberHotReloading';

import {
mountChildFibers,
reconcileChildFibers,
cloneChildFibers,
} from './ReactChildFiber';
import {
processUpdateQueue,
cloneUpdateQueue,
initializeUpdateQueue,
enqueueCapturedUpdate,
} from './ReactFiberClassUpdateQueue';
import {
NoLane,
NoLanes,
SyncLane,
OffscreenLane,
DefaultHydrationLane,
SomeRetryLane,
includesSomeLane,
laneToLanes,
removeLanes,
mergeLanes,
getBumpedLaneForHydration,
pickArbitraryLane,
} from './ReactFiberLane';
import {
ConcurrentMode,
NoMode,
ProfileMode,
StrictLegacyMode,
} from './ReactTypeOfMode';
import {
shouldSetTextContent,
isSuspenseInstancePending,
isSuspenseInstanceFallback,
getSuspenseInstanceFallbackErrorDetails,
registerSuspenseInstanceRetry,
supportsHydration,
supportsResources,
supportsSingletons,
isPrimaryRenderer,
getResource,
createHoistableInstance,
} from './ReactFiberConfig';
import type {SuspenseInstance} from './ReactFiberConfig';
import {shouldError, shouldSuspend} from './ReactFiberReconciler';
import {
pushHostContext,
pushHostContainer,
getRootHostContainer,
HostTransitionContext,
} from './ReactFiberHostContext';
import {
suspenseStackCursor,
pushSuspenseListContext,
ForceSuspenseFallback,
hasSuspenseListContext,
setDefaultShallowSuspenseListContext,
setShallowSuspenseListContext,
pushPrimaryTreeSuspenseHandler,
pushFallbackTreeSuspenseHandler,
pushOffscreenSuspenseHandler,
reuseSuspenseHandlerOnStack,
popSuspenseHandler,
} from './ReactFiberSuspenseContext';
import {
pushHiddenContext,
reuseHiddenContextOnStack,
} from './ReactFiberHiddenContext';
import {findFirstSuspended} from './ReactFiberSuspenseComponent';
import {
pushProvider,
propagateContextChange,
lazilyPropagateParentContextChanges,
propagateParentContextChangesToDeferredTree,
checkIfContextChanged,
readContext,
prepareToReadContext,
scheduleContextWorkOnParentPath,
} from './ReactFiberNewContext';
import {
renderWithHooks,
checkDidRenderIdHook,
bailoutHooks,
replaySuspendedComponentWithHooks,
renderTransitionAwareHostComponentWithHooks,
} from './ReactFiberHooks';
import {stopProfilerTimerIfRunning} from './ReactProfilerTimer';
import {
getMaskedContext,
getUnmaskedContext,
hasContextChanged as hasLegacyContextChanged,
pushContextProvider as pushLegacyContextProvider,
isContextProvider as isLegacyContextProvider,
pushTopLevelContextObject,
invalidateContextProvider,
} from './ReactFiberContext';
import {
getIsHydrating,
enterHydrationState,
reenterHydrationStateFromDehydratedSuspenseInstance,
resetHydrationState,
claimHydratableSingleton,
tryToClaimNextHydratableInstance,
tryToClaimNextHydratableTextInstance,
tryToClaimNextHydratableSuspenseInstance,
warnIfHydrating,
queueHydrationError,
} from './ReactFiberHydrationContext';
import {
adoptClassInstance,
constructClassInstance,
mountClassInstance,
resumeMountClassInstance,
updateClassInstance,
} from './ReactFiberClassComponent';
import {resolveDefaultProps} from './ReactFiberLazyComponent';
import {
resolveLazyComponentTag,
createFiberFromTypeAndProps,
createFiberFromFragment,
createFiberFromOffscreen,
createWorkInProgress,
isSimpleFunctionComponent,
} from './ReactFiber';
import {
retryDehydratedSuspenseBoundary,
scheduleUpdateOnFiber,
renderDidSuspendDelayIfPossible,
markSkippedUpdateLanes,
getWorkInProgressRoot,
} from './ReactFiberWorkLoop';
import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates';
import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent';
import {
createCapturedValue,
createCapturedValueAtFiber,
type CapturedValue,
} from './ReactCapturedValue';
import {createClassErrorUpdate} from './ReactFiberThrow';
import is from 'shared/objectIs';
import {
getForksAtLevel,
isForkedChild,
pushTreeId,
pushMaterializedTreeId,
} from './ReactFiberTreeContext';
import {
requestCacheFromPool,
pushRootTransition,
getSuspendedCache,
pushTransition,
getOffscreenDeferredCache,
getPendingTransitions,
} from './ReactFiberTransition';
import {
getMarkerInstances,
pushMarkerInstance,
pushRootMarkerInstance,
TransitionTracingMarker,
} from './ReactFiberTracingMarkerComponent';

const ReactCurrentOwner = [Link];

// A special exception that's used to unwind the stack when an update flows
// into a dehydrated boundary.
export const SelectiveHydrationException: mixed = new Error(
"This is not a real error. It's an implementation detail of React's " +
"selective hydration feature. If this leaks into userspace, it's a bug in " +
'React. Please file an issue.',
);

let didReceiveUpdate: boolean = false;

let didWarnAboutBadClass;
let didWarnAboutModulePatternComponent;
let didWarnAboutContextTypeOnFunctionComponent;
let didWarnAboutGetDerivedStateOnFunctionComponent;
let didWarnAboutFunctionRefs;
export let didWarnAboutReassigningProps: boolean;
let didWarnAboutRevealOrder;
let didWarnAboutTailOptions;
let didWarnAboutDefaultPropsOnFunctionComponent;

if (__DEV__) {
didWarnAboutBadClass = ({}: {[string]: boolean});
didWarnAboutModulePatternComponent = ({}: {[string]: boolean});
didWarnAboutContextTypeOnFunctionComponent = ({}: {[string]: boolean});
didWarnAboutGetDerivedStateOnFunctionComponent = ({}: {[string]: boolean});
didWarnAboutFunctionRefs = ({}: {[string]: boolean});
didWarnAboutReassigningProps = false;
didWarnAboutRevealOrder = ({}: {[empty]: boolean});
didWarnAboutTailOptions = ({}: {[string]: boolean});
didWarnAboutDefaultPropsOnFunctionComponent = ({}: {[string]: boolean});
}

export function reconcileChildren(

current: Fiber | null,
workInProgress: Fiber,
nextChildren: any,
renderLanes: Lanes,
) {
if (current === null) {
// If this is a fresh new component that hasn't been rendered yet, we
// won't update its child set by applying minimal side-effects. Instead,
// we will add them all to the child before it gets rendered. That means
// we can optimize this reconciliation pass by not tracking side-effects.
[Link] = mountChildFibers(
workInProgress,
null,
nextChildren,
renderLanes,
);
} else {
// If the current child is the same as the work in progress, it means that
// we haven't yet started any work on these children. Therefore, we use
// the clone algorithm to create a copy of all the current children.

// If we had any progressed work already, that is invalid at this point so

// let's throw it out.
[Link] = reconcileChildFibers(
workInProgress,
[Link],
nextChildren,
renderLanes,
);
}
}

function forceUnmountCurrentAndReconcile(
current: Fiber,
workInProgress: Fiber,
nextChildren: any,
renderLanes: Lanes,
) {
// This function is fork of reconcileChildren. It's used in cases where we
// want to reconcile without matching against the existing set. This has the
// effect of all current children being unmounted; even if the type and key
// are the same, the old child is unmounted and a new child is created.
//
// To do this, we're going to go through the reconcile algorithm twice. In
// the first pass, we schedule a deletion for all the current children by
// passing null.
[Link] = reconcileChildFibers(
workInProgress,
[Link],
null,
renderLanes,
);
// In the second pass, we mount the new children. The trick here is that we
// pass null in place of where we usually pass the current child set. This has
// the effect of remounting all children regardless of whether their
// identities match.
[Link] = reconcileChildFibers(
workInProgress,
null,
nextChildren,
renderLanes,
);
}

function updateForwardRef(
current: Fiber | null,
workInProgress: Fiber,
Component: any,
nextProps: any,
renderLanes: Lanes,
) {
// TODO: current can be non-null here even if the component
// hasn't yet mounted. This happens after the first render suspends.
// We'll need to figure out if this is fine or can cause issues.

if (__DEV__) {
if ([Link] !== [Link]) {
// Lazy component props can't be validated in createElement
// because they're only guaranteed to be resolved here.
const innerPropTypes = [Link];
if (innerPropTypes) {
checkPropTypes(
innerPropTypes,
nextProps, // Resolved props
'prop',
getComponentNameFromType(Component),
);
}
}
}

const render = [Link];

const ref = [Link];

// The rest is a fork of updateFunctionComponent

let nextChildren;
let hasId;
prepareToReadContext(workInProgress, renderLanes);
if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
}
if (__DEV__) {
[Link] = workInProgress;
setIsRendering(true);
nextChildren = renderWithHooks(
current,
workInProgress,
render,
nextProps,
ref,
renderLanes,
);
hasId = checkDidRenderIdHook();
setIsRendering(false);
} else {
nextChildren = renderWithHooks(
current,
workInProgress,
render,
nextProps,
ref,
renderLanes,
);
hasId = checkDidRenderIdHook();
}
if (enableSchedulingProfiler) {
markComponentRenderStopped();
}

if (current !== null && !didReceiveUpdate) {

bailoutHooks(current, workInProgress, renderLanes);
return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

if (getIsHydrating() && hasId) {

pushMaterializedTreeId(workInProgress);
}

// React DevTools reads this flag.

[Link] |= PerformedWork;
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return [Link];
}

function updateSimpleMemoComponent(
current: Fiber | null,
workInProgress: Fiber,
Component: any,
nextProps: any,
renderLanes: Lanes,
): null | Fiber {
// TODO: current can be non-null here even if the component
// hasn't yet mounted. This happens when the inner render suspends.
// We'll need to figure out if this is fine or can cause issues.

if (__DEV__) {
if ([Link] !== [Link]) {
// Lazy component props can't be validated in createElement
// because they're only guaranteed to be resolved here.
let outerMemoType = [Link];
if (outerMemoType.$$typeof === REACT_LAZY_TYPE) {
// We warn when you define propTypes on lazy()
// so let's just skip over it to find memo() outer wrapper.
// Inner props for memo are validated later.
const lazyComponent: LazyComponentType<any, any> = outerMemoType;
const payload = lazyComponent._payload;
const init = lazyComponent._init;
try {
outerMemoType = init(payload);
} catch (x) {
outerMemoType = null;
}
// Inner propTypes will be validated in the function component path.
const outerPropTypes = outerMemoType && (outerMemoType: any).propTypes;
if (outerPropTypes) {
checkPropTypes(
outerPropTypes,
nextProps, // Resolved (SimpleMemoComponent has no defaultProps)
'prop',
getComponentNameFromType(outerMemoType),
);
}
}
}
}
if (current !== null) {
const prevProps = [Link];
if (
shallowEqual(prevProps, nextProps) &&
[Link] === [Link] &&
// Prevent bailout if the implementation changed due to hot reload.
(__DEV__ ? [Link] === [Link] : true)
) {
didReceiveUpdate = false;

// The props are shallowly equal. Reuse the previous props object, like we
// would during a normal fiber bailout.
//
// We don't have strong guarantees that the props object is referentially
// equal during updates where we can't bail out anyway — like if the props
// are shallowly equal, but there's a local state or context update in the
// same batch.
//
// However, as a principle, we should aim to make the behavior consistent
// across different ways of memoizing a component. For example, [Link]
// has a different internal Fiber layout if you pass a normal function
// component (SimpleMemoComponent) versus if you pass a different type
// like forwardRef (MemoComponent). But this is an implementation detail.
// Wrapping a component in forwardRef (or [Link], etc) shouldn't
// affect whether the props object is reused during a bailout.
[Link] = nextProps = prevProps;

if (!checkScheduledUpdateOrContext(current, renderLanes)) {
// The pending lanes were cleared at the beginning of beginWork. We're
// about to bail out, but there might be other lanes that weren't
// included in the current render. Usually, the priority level of the
// remaining updates is accumulated during the evaluation of the
// component (i.e. when processing the update queue). But since since
// we're bailing out early *without* evaluating the component, we need
// to account for it here, too. Reset to the value of the current fiber.
// NOTE: This only applies to SimpleMemoComponent, not MemoComponent,
// because a MemoComponent fiber does not have hooks or an update queue;
// rather, it wraps around an inner component, which may or may not
// contains hooks.
// TODO: Move the reset at in beginWork out of the common path so that
// this is no longer necessary.
[Link] = [Link];
return bailoutOnAlreadyFinishedWork(
current,
workInProgress,
renderLanes,
);
} else if (([Link] & ForceUpdateForLegacySuspense) !== NoFlags) {
// This is a special case that only exists for legacy mode.
// See [Link]
didReceiveUpdate = true;
}
}
}
return updateFunctionComponent(
current,
workInProgress,
Component,
nextProps,
renderLanes,
);
}

function updateOffscreenComponent(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
const nextProps: OffscreenProps = [Link];
const nextChildren = [Link];
const nextIsDetached =
([Link]._pendingVisibility & OffscreenDetached) !== 0;

const prevState: OffscreenState | null =

current !== null ? [Link] : null;

markRef(current, workInProgress);

if (
[Link] === 'hidden' ||
(enableLegacyHidden &&
[Link] === 'unstable-defer-without-hiding') ||
nextIsDetached
) {
// Rendering a hidden tree.

const didSuspend = ([Link] & DidCapture) !== NoFlags;

if (didSuspend) {
// Something suspended inside a hidden tree

// Include the base lanes from the last render

const nextBaseLanes =
prevState !== null
? mergeLanes([Link], renderLanes)
: renderLanes;

if (current !== null) {

// Reset to the current children
let currentChild = ([Link] = [Link]);

// The current render suspended, but there may be other lanes with
// pending work. We can't read `childLanes` from the current Offscreen
// fiber because we reset it when it was deferred; however, we can read
// the pending lanes from the child fibers.
let currentChildLanes = NoLanes;
while (currentChild !== null) {
currentChildLanes = mergeLanes(
mergeLanes(currentChildLanes, [Link]),
[Link],
);
currentChild = [Link];
}
const lanesWeJustAttempted = nextBaseLanes;
const remainingChildLanes = removeLanes(
currentChildLanes,
lanesWeJustAttempted,
);
[Link] = remainingChildLanes;
} else {
[Link] = NoLanes;
[Link] = null;
}

return deferHiddenOffscreenComponent(
current,
workInProgress,
nextBaseLanes,
renderLanes,
);
}

if (([Link] & ConcurrentMode) === NoMode) {

// In legacy sync mode, don't defer the subtree. Render it now.
// TODO: Consider how Offscreen should work with transitions in the future
const nextState: OffscreenState = {
baseLanes: NoLanes,
cachePool: null,
};
[Link] = nextState;
if (enableCache) {
// push the cache pool even though we're going to bail out
// because otherwise there'd be a context mismatch
if (current !== null) {
pushTransition(workInProgress, null, null);
}
}
reuseHiddenContextOnStack(workInProgress);
pushOffscreenSuspenseHandler(workInProgress);
} else if (!includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
// We're hidden, and we're not rendering at Offscreen. We will bail out
// and resume this tree later.

// Schedule this fiber to re-render at Offscreen priority

[Link] = [Link] =
laneToLanes(OffscreenLane);

// Include the base lanes from the last render

const nextBaseLanes =
prevState !== null
? mergeLanes([Link], renderLanes)
: renderLanes;

return deferHiddenOffscreenComponent(
current,
workInProgress,
nextBaseLanes,
renderLanes,
);
} else {
// This is the second render. The surrounding visible content has already
// committed. Now we resume rendering the hidden tree.

// Rendering at offscreen, so we can clear the base lanes.

const nextState: OffscreenState = {
baseLanes: NoLanes,
cachePool: null,
};
[Link] = nextState;
if (enableCache && current !== null) {
// If the render that spawned this one accessed the cache pool, resume
// using the same cache. Unless the parent changed, since that means
// there was a refresh.
const prevCachePool = prevState !== null ? [Link] : null;
// TODO: Consider if and how Offscreen pre-rendering should
// be attributed to the transition that spawned it
pushTransition(workInProgress, prevCachePool, null);
}

// Push the lanes that were skipped when we bailed out.

if (prevState !== null) {
pushHiddenContext(workInProgress, prevState);
} else {
reuseHiddenContextOnStack(workInProgress);
}
pushOffscreenSuspenseHandler(workInProgress);
}
} else {
// Rendering a visible tree.
if (prevState !== null) {
// We're going from hidden -> visible.
let prevCachePool = null;
if (enableCache) {
// If the render that spawned this one accessed the cache pool, resume
// using the same cache. Unless the parent changed, since that means
// there was a refresh.
prevCachePool = [Link];
}

let transitions = null;

if (enableTransitionTracing) {
// We have now gone from hidden to visible, so any transitions should
// be added to the stack to get added to any Offscreen/suspense children
const instance: OffscreenInstance | null = [Link];
if (instance !== null && instance._transitions != null) {
transitions = [Link](instance._transitions);
}
}

pushTransition(workInProgress, prevCachePool, transitions);

// Push the lanes that were skipped when we bailed out.

pushHiddenContext(workInProgress, prevState);
reuseSuspenseHandlerOnStack(workInProgress);

// Since we're not hidden anymore, reset the state

[Link] = null;
} else {
// We weren't previously hidden, and we still aren't, so there's nothing
// special to do. Need to push to the stack regardless, though, to avoid
// a push/pop misalignment.

if (enableCache) {
// If the render that spawned this one accessed the cache pool, resume
// using the same cache. Unless the parent changed, since that means
// there was a refresh.
if (current !== null) {
pushTransition(workInProgress, null, null);
}
}

// We're about to bail out, but we need to push this to the stack anyway
// to avoid a push/pop misalignment.
reuseHiddenContextOnStack(workInProgress);
reuseSuspenseHandlerOnStack(workInProgress);
}
}

reconcileChildren(current, workInProgress, nextChildren, renderLanes);

return [Link];
}

// We're about to bail out, but we need to push this to the stack anyway
// to avoid a push/pop misalignment.
reuseHiddenContextOnStack(workInProgress);

pushOffscreenSuspenseHandler(workInProgress);

if (enableLazyContextPropagation && current !== null) {

// Since this tree will resume rendering in a separate render, we need
// to propagate parent contexts now so we don't lose track of which
// ones changed.
propagateParentContextChangesToDeferredTree(
current,
workInProgress,
renderLanes,
);
}

return null;
}

// Note: These happen to have identical begin phases, for now. We shouldn't hold
// ourselves to this constraint, though. If the behavior diverges, we should
// fork the function.
const updateLegacyHiddenComponent = updateOffscreenComponent;

function updateCacheComponent(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
if (!enableCache) {
return null;
}

prepareToReadContext(workInProgress, renderLanes);
const parentCache = readContext(CacheContext);

if (current === null) {

// Initial mount. Request a fresh cache from the pool.
const freshCache = requestCacheFromPool(renderLanes);
const initialState: CacheComponentState = {
parent: parentCache,
cache: freshCache,
};
[Link] = initialState;
initializeUpdateQueue(workInProgress);
pushCacheProvider(workInProgress, freshCache);
} else {
// Check for updates
if (includesSomeLane([Link], renderLanes)) {
cloneUpdateQueue(current, workInProgress);
processUpdateQueue(workInProgress, null, null, renderLanes);
}
const prevState: CacheComponentState = [Link];
const nextState: CacheComponentState = [Link];

// Compare the new parent cache to the previous to see detect there was
// a refresh.
if ([Link] !== parentCache) {
// Refresh in parent. Update the parent.
const derivedState: CacheComponentState = {
parent: parentCache,
cache: parentCache,
};

// Copied from getDerivedStateFromProps implementation. Once the update

// queue is empty, persist the derived state onto the base state.
[Link] = derivedState;
if ([Link] === NoLanes) {
const updateQueue: UpdateQueue<any> = ([Link]: any);
[Link] = [Link] = derivedState;
}

pushCacheProvider(workInProgress, parentCache);
// No need to propagate a context change because the refreshed parent
// already did.
} else {
// The parent didn't refresh. Now check if this cache did.
const nextCache = [Link];
pushCacheProvider(workInProgress, nextCache);
if (nextCache !== [Link]) {
// This cache refreshed. Propagate a context change.
propagateContextChange(workInProgress, CacheContext, renderLanes);
}
}
}

const nextChildren = [Link];

reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return [Link];
}

// This should only be called if the name changes

function updateTracingMarkerComponent(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
if (!enableTransitionTracing) {
return null;
}

// TODO: (luna) Only update the tracing marker if it's newly rendered or it's
name changed.
// A tracing marker is only associated with the transitions that rendered
// or updated it, so we can create a new set of transitions each time
if (current === null) {
const currentTransitions = getPendingTransitions();
if (currentTransitions !== null) {
const markerInstance: TracingMarkerInstance = {
tag: TransitionTracingMarker,
transitions: new Set(currentTransitions),
pendingBoundaries: null,
name: [Link],
aborts: null,
};
[Link] = markerInstance;

// We call the marker complete callback when all child suspense boundaries
resolve.
// We do this in the commit phase on Offscreen. If the marker has no child
suspense
// boundaries, we need to schedule a passive effect to make sure we call the
marker
// complete callback.
[Link] |= Passive;
}
} else {
if (__DEV__) {
if ([Link] !== [Link]) {
[Link](
'Changing the name of a tracing marker after mount is not supported. ' +
'To remount the tracing marker, pass it a new key.',
);
}
}
}

const instance: TracingMarkerInstance | null = [Link];

if (instance !== null) {
pushMarkerInstance(workInProgress, instance);
}
const nextChildren = [Link];
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return [Link];
}

function updateFragment(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
const nextChildren = [Link];
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return [Link];
}

function updateMode(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
const nextChildren = [Link];
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return [Link];
}

function updateProfiler(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
if (enableProfilerTimer) {
[Link] |= Update;

if (enableProfilerCommitHooks) {
// Reset effect durations for the next eventual effect phase.
// These are reset during render to allow the DevTools commit hook a chance
to read them,
const stateNode = [Link];
[Link] = 0;
[Link] = 0;
}
}
const nextProps = [Link];
const nextChildren = [Link];
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return [Link];
}

function markRef(current: Fiber | null, workInProgress: Fiber) {

const ref = [Link];
if (
(current === null && ref !== null) ||
(current !== null && [Link] !== ref)
) {
// Schedule a Ref effect
[Link] |= Ref;
[Link] |= RefStatic;
}
}

let nextChildren;
let hasId;
prepareToReadContext(workInProgress, renderLanes);
if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
}
if (__DEV__) {
[Link] = workInProgress;
setIsRendering(true);
nextChildren = renderWithHooks(
current,
workInProgress,
Component,
nextProps,
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
setIsRendering(false);
} else {
nextChildren = renderWithHooks(
current,
workInProgress,
Component,
nextProps,
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
}
if (enableSchedulingProfiler) {
markComponentRenderStopped();
}

if (current !== null && !didReceiveUpdate) {

bailoutHooks(current, workInProgress, renderLanes);
return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

if (getIsHydrating() && hasId) {

pushMaterializedTreeId(workInProgress);
}

// React DevTools reads this flag.

[Link] |= PerformedWork;
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return [Link];
}

export function replayFunctionComponent(

current: Fiber | null,
workInProgress: Fiber,
nextProps: any,
Component: any,
secondArg: any,
renderLanes: Lanes,
): Fiber | null {
// This function is used to replay a component that previously suspended,
// after its data resolves. It's a simplified version of
// updateFunctionComponent that reuses the hooks from the previous attempt.

prepareToReadContext(workInProgress, renderLanes);
if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
}
const nextChildren = replaySuspendedComponentWithHooks(
current,
workInProgress,
Component,
nextProps,
secondArg,
);
const hasId = checkDidRenderIdHook();
if (enableSchedulingProfiler) {
markComponentRenderStopped();
}

if (current !== null && !didReceiveUpdate) {

bailoutHooks(current, workInProgress, renderLanes);
return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

if (getIsHydrating() && hasId) {

pushMaterializedTreeId(workInProgress);
}

// React DevTools reads this flag.

[Link] |= PerformedWork;
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return [Link];
}

// Push context providers early to prevent context stack mismatches.

// During mounting we don't know the child context yet as the instance doesn't
exist.
// We will invalidate the child context in finishClassComponent() right after
rendering.
let hasContext;
if (isLegacyContextProvider(Component)) {
hasContext = true;
pushLegacyContextProvider(workInProgress);
} else {
hasContext = false;
}
prepareToReadContext(workInProgress, renderLanes);

const instance = [Link];

let shouldUpdate;
if (instance === null) {
resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress);

// In the initial pass we might need to construct the instance.

constructClassInstance(workInProgress, Component, nextProps);
mountClassInstance(workInProgress, Component, nextProps, renderLanes);
shouldUpdate = true;
} else if (current === null) {
// In a resume, we'll already have an instance we can reuse.
shouldUpdate = resumeMountClassInstance(
workInProgress,
Component,
nextProps,
renderLanes,
);
} else {
shouldUpdate = updateClassInstance(
current,
workInProgress,
Component,
nextProps,
renderLanes,
);
}
const nextUnitOfWork = finishClassComponent(
current,
workInProgress,
Component,
shouldUpdate,
hasContext,
renderLanes,
);
if (__DEV__) {
const inst = [Link];
if (shouldUpdate && [Link] !== nextProps) {
if (!didWarnAboutReassigningProps) {
[Link](
'It looks like %s is reassigning its own `[Link]` while rendering. '
+
'This is not supported and can lead to confusing bugs.',
getComponentNameFromFiber(workInProgress) || 'a component',
);
}
didWarnAboutReassigningProps = true;
}
}
return nextUnitOfWork;
}

function finishClassComponent(
current: Fiber | null,
workInProgress: Fiber,
Component: any,
shouldUpdate: boolean,
hasContext: boolean,
renderLanes: Lanes,
) {
// Refs should update even if shouldComponentUpdate returns false
markRef(current, workInProgress);

const didCaptureError = ([Link] & DidCapture) !== NoFlags;

if (!shouldUpdate && !didCaptureError) {

// Context providers should defer to sCU for rendering
if (hasContext) {
invalidateContextProvider(workInProgress, Component, false);
}

return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);

}

const instance = [Link];

// Rerender
[Link] = workInProgress;
let nextChildren;
if (
didCaptureError &&
typeof [Link] !== 'function'
) {
// If we captured an error, but getDerivedStateFromError is not defined,
// unmount all the children. componentDidCatch will schedule an update to
// re-render a fallback. This is temporary until we migrate everyone to
// the new API.
// TODO: Warn in a future release.
nextChildren = null;

if (enableProfilerTimer) {
stopProfilerTimerIfRunning(workInProgress);
}
} else {
if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
}
if (__DEV__) {
setIsRendering(true);
nextChildren = [Link]();
if (
debugRenderPhaseSideEffectsForStrictMode &&
[Link] & StrictLegacyMode
) {
setIsStrictModeForDevtools(true);
try {
[Link]();
} finally {
setIsStrictModeForDevtools(false);
}
}
setIsRendering(false);
} else {
nextChildren = [Link]();
}
if (enableSchedulingProfiler) {
markComponentRenderStopped();
}
}

// React DevTools reads this flag.

[Link] |= PerformedWork;
if (current !== null && didCaptureError) {
// If we're recovering from an error, reconcile without reusing any of
// the existing children. Conceptually, the normal children and the children
// that are shown on error are two different sets, so we shouldn't reuse
// normal children even if their identities match.
forceUnmountCurrentAndReconcile(
current,
workInProgress,
nextChildren,
renderLanes,
);
} else {
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
}

// Memoize state using the values we just used to render.

// TODO: Restructure so we never read values from the instance.
[Link] = [Link];

// The context might have changed so we need to recalculate it.

if (hasContext) {
invalidateContextProvider(workInProgress, Component, true);
}

return [Link];
}

function pushHostRootContext(workInProgress: Fiber) {

const root = ([Link]: FiberRoot);
if ([Link]) {
pushTopLevelContextObject(
workInProgress,
[Link],
[Link] !== [Link],
);
} else if ([Link]) {
// Should always be set
pushTopLevelContextObject(workInProgress, [Link], false);
}
pushHostContainer(workInProgress, [Link]);
}

function updateHostRoot(
current: null | Fiber,
workInProgress: Fiber,
renderLanes: Lanes,
) {
pushHostRootContext(workInProgress);

if (current === null) {

throw new Error('Should have a current fiber. This is a bug in React.');
}

const nextProps = [Link];

const prevState = [Link];
const prevChildren = [Link];
cloneUpdateQueue(current, workInProgress);
processUpdateQueue(workInProgress, nextProps, null, renderLanes);

const nextState: RootState = [Link];

const root: FiberRoot = [Link];
pushRootTransition(workInProgress, root, renderLanes);

if (enableTransitionTracing) {
pushRootMarkerInstance(workInProgress);
}

if (enableCache) {
const nextCache: Cache = [Link];
pushCacheProvider(workInProgress, nextCache);
if (nextCache !== [Link]) {
// The root cache refreshed.
propagateContextChange(workInProgress, CacheContext, renderLanes);
}
}

// Caution: React DevTools currently depends on this property

// being called "element".
const nextChildren = [Link];
if (supportsHydration && [Link]) {
// This is a hydration root whose shell has not yet hydrated. We should
// attempt to hydrate.

// Flip isDehydrated to false to indicate that when this render

// finishes, the root will no longer be dehydrated.
const overrideState: RootState = {
element: nextChildren,
isDehydrated: false,
cache: [Link],
};
const updateQueue: UpdateQueue<RootState> =
([Link]: any);
// `baseState` can always be the last state because the root doesn't
// have reducer functions so it doesn't need rebasing.
[Link] = overrideState;
[Link] = overrideState;

if ([Link] & ForceClientRender) {

// Something errored during a previous attempt to hydrate the shell, so we
// forced a client render.
const recoverableError = createCapturedValueAtFiber<mixed>(
new Error(
'There was an error while hydrating. Because the error happened outside '
+
'of a Suspense boundary, the entire root will switch to ' +
'client rendering.',
),
workInProgress,
);
return mountHostRootWithoutHydrating(
current,
workInProgress,
nextChildren,
renderLanes,
recoverableError,
);
} else if (nextChildren !== prevChildren) {
const recoverableError = createCapturedValueAtFiber<mixed>(
new Error(
'This root received an early update, before anything was able ' +
'hydrate. Switched the entire root to client rendering.',
),
workInProgress,
);
return mountHostRootWithoutHydrating(
current,
workInProgress,
nextChildren,
renderLanes,
recoverableError,
);
} else {
// The outermost shell has not hydrated yet. Start hydrating.
enterHydrationState(workInProgress);

const child = mountChildFibers(

workInProgress,
null,
nextChildren,
renderLanes,
);
[Link] = child;

let node = child;

while (node) {
// Mark each child as hydrating. This is a fast path to know whether this
// tree is part of a hydrating tree. This is used to determine if a child
// node has fully mounted yet, and for scheduling event replaying.
// Conceptually this is similar to Placement in that a new subtree is
// inserted into the React tree here. It just happens to not need DOM
// mutations because it already exists.
[Link] = ([Link] & ~Placement) | Hydrating;
node = [Link];
}
}
} else {
// Root is not dehydrated. Either this is a client-only root, or it
// already hydrated.
resetHydrationState();
if (nextChildren === prevChildren) {
return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
}
return [Link];
}

function mountHostRootWithoutHydrating(
current: Fiber,
workInProgress: Fiber,
nextChildren: ReactNodeList,
renderLanes: Lanes,
recoverableError: CapturedValue<mixed>,
) {
// Revert to client rendering.
resetHydrationState();

queueHydrationError(recoverableError);

[Link] |= ForceClientRender;

reconcileChildren(current, workInProgress, nextChildren, renderLanes);

return [Link];
}

function updateHostComponent(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
pushHostContext(workInProgress);

if (current === null) {

tryToClaimNextHydratableInstance(workInProgress);
}

const type = [Link];

const nextProps = [Link];
const prevProps = current !== null ? [Link] : null;

let nextChildren = [Link];

const isDirectTextChild = shouldSetTextContent(type, nextProps);

if (isDirectTextChild) {
// We special case a direct text child of a host node. This is a common
// case. We won't handle it as a reified child. We will instead handle
// this in the host environment that also has access to this prop. That
// avoids allocating another HostText fiber and traversing it.
nextChildren = null;
} else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
// If we're switching from a direct text child to a normal child, or to
// empty, we need to schedule the text content to be reset.
[Link] |= ContentReset;
}

if (enableFormActions && enableAsyncActions) {

const memoizedState = [Link];
if (memoizedState !== null) {
// This fiber has been upgraded to a stateful component. The only way
// happens currently is for form actions. We use hooks to track the
// pending and error state of the form.
//
// Once a fiber is upgraded to be stateful, it remains stateful for the
// rest of its lifetime.
const newState = renderTransitionAwareHostComponentWithHooks(
current,
workInProgress,
renderLanes,
);

// If the transition state changed, propagate the change to all the

// descendents. We use Context as an implementation detail for this.
//
// This is intentionally set here instead of pushHostContext because
// pushHostContext gets called before we process the state hook, to avoid
// a state mismatch in the event that something suspends.
//
// NOTE: This assumes that there cannot be nested transition providers,
// because the only renderer that implements this feature is React DOM,
// and forms cannot be nested. If we did support nested providers, then
// we would need to push a context value even for host fibers that
// haven't been upgraded yet.
if (isPrimaryRenderer) {
HostTransitionContext._currentValue = newState;
} else {
HostTransitionContext._currentValue2 = newState;
}
if (enableLazyContextPropagation) {
// In the lazy propagation implementation, we don't scan for matching
// consumers until something bails out.
} else {
if (didReceiveUpdate) {
if (current !== null) {
const oldStateHook: Hook = [Link];
const oldState: TransitionStatus = [Link];
// This uses regular equality instead of [Link] because we assume
// that host transition state doesn't include NaN as a valid type.
if (oldState !== newState) {
propagateContextChange(
workInProgress,
HostTransitionContext,
renderLanes,
);
}
}
}
}
}
}

markRef(current, workInProgress);
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return [Link];
}

function updateHostSingleton(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
pushHostContext(workInProgress);

if (current === null) {

claimHydratableSingleton(workInProgress);
}

const nextChildren = [Link];

if (current === null && !getIsHydrating()) {

// Similar to Portals we append Singleton children in the commit phase. So we
// Track insertions even on mount.
// TODO: Consider unifying this with how the root works.
[Link] = reconcileChildFibers(
workInProgress,
null,
nextChildren,
renderLanes,
);
} else {
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
}
markRef(current, workInProgress);
return [Link];
}

function updateHostText(current: null | Fiber, workInProgress: Fiber) {

if (current === null) {
tryToClaimNextHydratableTextInstance(workInProgress);
}
// Nothing to do here. This is terminal. We'll do the completion step
// immediately after.
return null;
}

function mountLazyComponent(
_current: null | Fiber,
workInProgress: Fiber,
elementType: any,
renderLanes: Lanes,
) {
resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);

// This message intentionally doesn't mention ForwardRef or MemoComponent

// because the fact that it's a separate type of work is an
// implementation detail.
throw new Error(
`Element type is invalid. Received a promise that resolves to: ${Component}. `
+
`Lazy element type must resolve to a class or function.${hint}`,
);
}

function mountIncompleteClassComponent(
_current: null | Fiber,
workInProgress: Fiber,
Component: any,
nextProps: any,
renderLanes: Lanes,
) {
resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);

// Promote the fiber to a class and try rendering again.

[Link] = ClassComponent;

// The rest of this function is a fork of `updateClassComponent`

// Push context providers early to prevent context stack mismatches.

constructClassInstance(workInProgress, Component, nextProps);

mountClassInstance(workInProgress, Component, nextProps, renderLanes);

return finishClassComponent(
null,
workInProgress,
Component,
true,
hasContext,
renderLanes,
);
}

function mountIndeterminateComponent(
_current: null | Fiber,
workInProgress: Fiber,
Component: $FlowFixMe,
renderLanes: Lanes,
) {
resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);

const props = [Link];

let context;
if (!disableLegacyContext) {
const unmaskedContext = getUnmaskedContext(
workInProgress,
Component,
false,
);
context = getMaskedContext(workInProgress, unmaskedContext);
}

prepareToReadContext(workInProgress, renderLanes);
let value;
let hasId;

if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
}
if (__DEV__) {
if (
[Link] &&
typeof [Link] === 'function'
) {
const componentName = getComponentNameFromType(Component) || 'Unknown';

if (!didWarnAboutBadClass[componentName]) {
[Link](
"The <%s /> component appears to have a render method, but doesn't extend
[Link]. " +
'This is likely to cause errors. Change %s to extend [Link]
instead.',
componentName,
componentName,
);
didWarnAboutBadClass[componentName] = true;
}
}

if ([Link] & StrictLegacyMode) {

[Link](workInProgress, null);
}

setIsRendering(true);
[Link] = workInProgress;
value = renderWithHooks(
null,
workInProgress,
Component,
props,
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
setIsRendering(false);
} else {
value = renderWithHooks(
null,
workInProgress,
Component,
props,
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
}
if (enableSchedulingProfiler) {
markComponentRenderStopped();
}

// React DevTools reads this flag.

[Link] |= PerformedWork;

if (__DEV__) {
// Support for module components is deprecated and is removed behind a flag.
// Whether or not it would crash later, we want to show a good message in DEV
first.
if (
typeof value === 'object' &&
value !== null &&
typeof [Link] === 'function' &&
value.$$typeof === undefined
) {
const componentName = getComponentNameFromType(Component) || 'Unknown';
if (!didWarnAboutModulePatternComponent[componentName]) {
[Link](
'The <%s /> component appears to be a function component that returns a
class instance. ' +
'Change %s to a class that extends [Link] instead. ' +
"If you can't use a class try assigning the prototype on the function
as a workaround. " +
"`%[Link] = [Link]`. Don't use an arrow
function since it " +
'cannot be called with `new` by React.',
componentName,
componentName,
componentName,
);
didWarnAboutModulePatternComponent[componentName] = true;
}
}
}

if (
// Run these checks in production only if the flag is off.
// Eventually we'll delete this branch altogether.
!disableModulePatternComponents &&
typeof value === 'object' &&
value !== null &&
typeof [Link] === 'function' &&
value.$$typeof === undefined
) {
if (__DEV__) {
const componentName = getComponentNameFromType(Component) || 'Unknown';
if (!didWarnAboutModulePatternComponent[componentName]) {
[Link](
'The <%s /> component appears to be a function component that returns a
class instance. ' +
'Change %s to a class that extends [Link] instead. ' +
"If you can't use a class try assigning the prototype on the function
as a workaround. " +
"`%[Link] = [Link]`. Don't use an arrow
function since it " +
'cannot be called with `new` by React.',
componentName,
componentName,
componentName,
);
didWarnAboutModulePatternComponent[componentName] = true;
}
}

// Proceed under the assumption that this is a class instance

[Link] = ClassComponent;

// Throw out any hooks that were used.

[Link] = null;
[Link] = null;

// Push context providers early to prevent context stack mismatches.

// During mounting we don't know the child context yet as the instance doesn't
exist.
// We will invalidate the child context in finishClassComponent() right after
rendering.
let hasContext = false;
if (isLegacyContextProvider(Component)) {
hasContext = true;
pushLegacyContextProvider(workInProgress);
} else {
hasContext = false;
}

[Link] =
[Link] !== null && [Link] !== undefined ? [Link] : null;

initializeUpdateQueue(workInProgress);

adoptClassInstance(workInProgress, value);
mountClassInstance(workInProgress, Component, props, renderLanes);
return finishClassComponent(
null,
workInProgress,
Component,
true,
hasContext,
renderLanes,
);
} else {
// Proceed under the assumption that this is a function component
[Link] = FunctionComponent;
if (__DEV__) {
if (disableLegacyContext && [Link]) {
[Link](
'%s uses the legacy contextTypes API which is no longer supported. ' +
'Use [Link]() with [Link]() instead.',
getComponentNameFromType(Component) || 'Unknown',
);
}
}

if (getIsHydrating() && hasId) {

pushMaterializedTreeId(workInProgress);
}

reconcileChildren(null, workInProgress, value, renderLanes);

if (__DEV__) {
validateFunctionComponentInDev(workInProgress, Component);
}
return [Link];
}
}

function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {

if (__DEV__) {
if (Component) {
if ([Link]) {
[Link](
'%s(...): childContextTypes cannot be defined on a function component.',
[Link] || [Link] || 'Component',
);
}
}
if ([Link] !== null) {
let info = '';
const ownerName = getCurrentFiberOwnerNameInDevOrNull();
if (ownerName) {
info += '\n\nCheck the render method of `' + ownerName + '`.';
}
let warningKey = ownerName || '';
const debugSource = workInProgress._debugSource;
if (debugSource) {
warningKey = [Link] + ':' + [Link];
}
if (!didWarnAboutFunctionRefs[warningKey]) {
didWarnAboutFunctionRefs[warningKey] = true;
[Link](
'Function components cannot be given refs. ' +
'Attempts to access this ref will fail. ' +
'Did you mean to use [Link]()?%s',
info,
);
}
}

if ([Link] !== undefined) {

const componentName = getComponentNameFromType(Component) || 'Unknown';

if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
[Link](
'%s: Support for defaultProps will be removed from function components '
+
'in a future major release. Use JavaScript default parameters
instead.',
componentName,
);
didWarnAboutDefaultPropsOnFunctionComponent[componentName] = true;
}
}

if (typeof [Link] === 'function') {

const componentName = getComponentNameFromType(Component) || 'Unknown';

if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
[Link](
'%s: Function components do not support getDerivedStateFromProps.',
componentName,
);
didWarnAboutGetDerivedStateOnFunctionComponent[componentName] = true;
}
}

if (
typeof [Link] === 'object' &&
[Link] !== null
) {
const componentName = getComponentNameFromType(Component) || 'Unknown';

if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
[Link](
'%s: Function components do not support contextType.',
componentName,
);
didWarnAboutContextTypeOnFunctionComponent[componentName] = true;
}
}
}
}
const SUSPENDED_MARKER: SuspenseState = {
dehydrated: null,
treeContext: null,
retryLane: NoLane,
};

function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {

return {
baseLanes: renderLanes,
cachePool: getSuspendedCache(),
};
}

// TODO: Probably should inline this back

function shouldRemainOnFallback(
current: null | Fiber,
workInProgress: Fiber,
renderLanes: Lanes,
) {
// If we're already showing a fallback, there are cases where we need to
// remain on that fallback regardless of whether the content has resolved.
// For example, SuspenseList coordinates when nested content appears.
// TODO: For compatibility with offscreen prerendering, this should also check
// whether the current fiber (if it exists) was visible in the previous tree.
if (current !== null) {
const suspenseState: SuspenseState = [Link];
if (suspenseState === null) {
// Currently showing content. Don't hide it, even if ForceSuspenseFallback
// is true. More precise name might be "ForceRemainSuspenseFallback".
// Note: This is a factoring smell. Can't remain on a fallback if there's
// no fallback to remain on.
return false;
}
}

// Not currently showing content. Consult the Suspense context.

const suspenseContext: SuspenseContext = [Link];
return hasSuspenseListContext(
suspenseContext,
(ForceSuspenseFallback: SuspenseContext),
);
}

function getRemainingWorkInPrimaryTree(current: Fiber, renderLanes: Lanes) {

// TODO: Should not remove render lanes that were pinged during this render
return removeLanes([Link], renderLanes);
}

function updateSuspenseComponent(
current: null | Fiber,
workInProgress: Fiber,
renderLanes: Lanes,
) {
const nextProps = [Link];

// This is used by DevTools to force a boundary to suspend.

if (__DEV__) {
if (shouldSuspend(workInProgress)) {
[Link] |= DidCapture;
}
}

let showFallback = false;

const didSuspend = ([Link] & DidCapture) !== NoFlags;
if (
didSuspend ||
shouldRemainOnFallback(current, workInProgress, renderLanes)
) {
// Something in this boundary's subtree already suspended. Switch to
// rendering the fallback children.
showFallback = true;
[Link] &= ~DidCapture;
}

// OK, the next part is confusing. We're about to reconcile the Suspense
// boundary's children. This involves some custom reconciliation logic. Two
// main reasons this is so complicated.
//
// First, Legacy Mode has different semantics for backwards compatibility. The
// primary tree will commit in an inconsistent state, so when we do the
// second pass to render the fallback, we do some exceedingly, uh, clever
// hacks to make that not totally break. Like transferring effects and
// deletions from hidden tree. In Concurrent Mode, it's much simpler,
// because we bailout on the primary tree completely and leave it in its old
// state, no effects. Same as what we do for Offscreen (except that
// Offscreen doesn't have the first render pass).
//
// Second is hydration. During hydration, the Suspense fiber has a slightly
// different layout, where the child points to a dehydrated fragment, which
// contains the DOM rendered by the server.
//
// Third, even if you set all that aside, Suspense is like error boundaries in
// that we first we try to render one tree, and if that fails, we render again
// and switch to a different tree. Like a try/catch block. So we have to track
// which branch we're currently rendering. Ideally we would model this using
// a stack.
if (current === null) {
// Initial mount

// Special path for hydration

// If we're currently hydrating, try to hydrate this boundary.
if (getIsHydrating()) {
// We must push the suspense handler context *before* attempting to
// hydrate, to avoid a mismatch in case it errors.
if (showFallback) {
pushPrimaryTreeSuspenseHandler(workInProgress);
} else {
pushFallbackTreeSuspenseHandler(workInProgress);
}
tryToClaimNextHydratableSuspenseInstance(workInProgress);
// This could've been a dehydrated suspense component.
const suspenseState: null | SuspenseState = [Link];
if (suspenseState !== null) {
const dehydrated = [Link];
if (dehydrated !== null) {
return mountDehydratedSuspenseComponent(
workInProgress,
dehydrated,
renderLanes,
);
}
}
// If hydration didn't succeed, fall through to the normal Suspense path.
// To avoid a stack mismatch we need to pop the Suspense handler that we
// pushed above. This will become less awkward when move the hydration
// logic to its own fiber.
popSuspenseHandler(workInProgress);
}

const nextPrimaryChildren = [Link];

const nextFallbackChildren = [Link];

if (showFallback) {
pushFallbackTreeSuspenseHandler(workInProgress);

const fallbackFragment = mountSuspenseFallbackChildren(

workInProgress,
nextPrimaryChildren,
nextFallbackChildren,
renderLanes,
);
const primaryChildFragment: Fiber = ([Link]: any);
[Link] =
mountSuspenseOffscreenState(renderLanes);
[Link] = SUSPENDED_MARKER;
if (enableTransitionTracing) {
const currentTransitions = getPendingTransitions();
if (currentTransitions !== null) {
const parentMarkerInstances = getMarkerInstances();
const offscreenQueue: OffscreenQueue | null =
([Link]: any);
if (offscreenQueue === null) {
const newOffscreenQueue: OffscreenQueue = {
transitions: currentTransitions,
markerInstances: parentMarkerInstances,
retryQueue: null,
};
[Link] = newOffscreenQueue;
} else {
[Link] = currentTransitions;
[Link] = parentMarkerInstances;
}
}
}

return fallbackFragment;
} else if (
enableCPUSuspense &&
typeof nextProps.unstable_expectedLoadTime === 'number'
) {
// This is a CPU-bound tree. Skip this tree and show a placeholder to
// unblock the surrounding content. Then immediately retry after the
// initial commit.
pushFallbackTreeSuspenseHandler(workInProgress);
const fallbackFragment = mountSuspenseFallbackChildren(
workInProgress,
nextPrimaryChildren,
nextFallbackChildren,
renderLanes,
);
const primaryChildFragment: Fiber = ([Link]: any);
[Link] =
mountSuspenseOffscreenState(renderLanes);
[Link] = SUSPENDED_MARKER;

// TODO: Transition Tracing is not yet implemented for CPU Suspense.

// Since nothing actually suspended, there will nothing to ping this to

// get it started back up to attempt the next item. While in terms of
// priority this work has the same priority as this current render, it's
// not part of the same transition once the transition has committed. If
// it's sync, we still want to yield so that it can be painted.
// Conceptually, this is really the same as pinging. We can use any
// RetryLane even if it's the one currently rendering since we're leaving
// it behind on this node.
[Link] = SomeRetryLane;
return fallbackFragment;
} else {
pushPrimaryTreeSuspenseHandler(workInProgress);
return mountSuspensePrimaryChildren(
workInProgress,
nextPrimaryChildren,
renderLanes,
);
}
} else {
// This is an update.

// Special path for hydration

const prevState: null | SuspenseState = [Link];
if (prevState !== null) {
const dehydrated = [Link];
if (dehydrated !== null) {
return updateDehydratedSuspenseComponent(
current,
workInProgress,
didSuspend,
nextProps,
dehydrated,
prevState,
renderLanes,
);
}
}

if (showFallback) {
pushFallbackTreeSuspenseHandler(workInProgress);

const nextFallbackChildren = [Link];

function mountSuspensePrimaryChildren(
workInProgress: Fiber,
primaryChildren: $FlowFixMe,
renderLanes: Lanes,
) {
const mode = [Link];
const primaryChildProps: OffscreenProps = {
mode: 'visible',
children: primaryChildren,
};
const primaryChildFragment = mountWorkInProgressOffscreenFiber(
primaryChildProps,
mode,
renderLanes,
);
[Link] = workInProgress;
[Link] = primaryChildFragment;
return primaryChildFragment;
}
function mountSuspenseFallbackChildren(
workInProgress: Fiber,
primaryChildren: $FlowFixMe,
fallbackChildren: $FlowFixMe,
renderLanes: Lanes,
) {
const mode = [Link];
const progressedPrimaryFragment: Fiber | null = [Link];

const primaryChildProps: OffscreenProps = {

mode: 'hidden',
children: primaryChildren,
};

let primaryChildFragment;
let fallbackChildFragment;
if (
(mode & ConcurrentMode) === NoMode &&
progressedPrimaryFragment !== null
) {
// In legacy mode, we commit the primary tree as if it successfully
// completed, even though it's in an inconsistent state.
primaryChildFragment = progressedPrimaryFragment;
[Link] = NoLanes;
[Link] = primaryChildProps;

if (enableProfilerTimer && [Link] & ProfileMode) {

// Reset the durations from the first pass so they aren't included in the
// final amounts. This seems counterintuitive, since we're intentionally
// not measuring part of the render phase, but this makes it match what we
// do in Concurrent Mode.
[Link] = 0;
[Link] = -1;
[Link] = 0;
[Link] = 0;
}

fallbackChildFragment = createFiberFromFragment(
fallbackChildren,
mode,
renderLanes,
null,
);
} else {
primaryChildFragment = mountWorkInProgressOffscreenFiber(
primaryChildProps,
mode,
NoLanes,
);
fallbackChildFragment = createFiberFromFragment(
fallbackChildren,
mode,
renderLanes,
null,
);
}

[Link] = workInProgress;
[Link] = workInProgress;
[Link] = fallbackChildFragment;
[Link] = primaryChildFragment;
return fallbackChildFragment;
}

function mountWorkInProgressOffscreenFiber(
offscreenProps: OffscreenProps,
mode: TypeOfMode,
renderLanes: Lanes,
) {
// The props argument to `createFiberFromOffscreen` is `any` typed, so we use
// this wrapper function to constrain it.
return createFiberFromOffscreen(offscreenProps, mode, NoLanes, null);
}

function updateWorkInProgressOffscreenFiber(
current: Fiber,
offscreenProps: OffscreenProps,
) {
// The props argument to `createWorkInProgress` is `any` typed, so we use this
// wrapper function to constrain it.
return createWorkInProgress(current, offscreenProps);
}

function updateSuspensePrimaryChildren(
current: Fiber,
workInProgress: Fiber,
primaryChildren: $FlowFixMe,
renderLanes: Lanes,
) {
const currentPrimaryChildFragment: Fiber = ([Link]: any);
const currentFallbackChildFragment: Fiber | null =
[Link];

const primaryChildFragment = updateWorkInProgressOffscreenFiber(

currentPrimaryChildFragment,
{
mode: 'visible',
children: primaryChildren,
},
);
if (([Link] & ConcurrentMode) === NoMode) {
[Link] = renderLanes;
}
[Link] = workInProgress;
[Link] = null;
if (currentFallbackChildFragment !== null) {
// Delete the fallback child fragment
const deletions = [Link];
if (deletions === null) {
[Link] = [currentFallbackChildFragment];
[Link] |= ChildDeletion;
} else {
[Link](currentFallbackChildFragment);
}
}

[Link] = primaryChildFragment;
return primaryChildFragment;
}

function updateSuspenseFallbackChildren(
current: Fiber,
workInProgress: Fiber,
primaryChildren: $FlowFixMe,
fallbackChildren: $FlowFixMe,
renderLanes: Lanes,
) {
const mode = [Link];
const currentPrimaryChildFragment: Fiber = ([Link]: any);
const currentFallbackChildFragment: Fiber | null =
[Link];

const primaryChildProps: OffscreenProps = {

mode: 'hidden',
children: primaryChildren,
};

let primaryChildFragment;
if (
// In legacy mode, we commit the primary tree as if it successfully
// completed, even though it's in an inconsistent state.
(mode & ConcurrentMode) === NoMode &&
// Make sure we're on the second pass, i.e. the primary child fragment was
// already cloned. In legacy mode, the only case where this isn't true is
// when DevTools forces us to display a fallback; we skip the first render
// pass entirely and go straight to rendering the fallback. (In Concurrent
// Mode, SuspenseList can also trigger this scenario, but this is a legacy-
// only codepath.)
[Link] !== currentPrimaryChildFragment
) {
const progressedPrimaryFragment: Fiber = ([Link]: any);
primaryChildFragment = progressedPrimaryFragment;
[Link] = NoLanes;
[Link] = primaryChildProps;

if (enableProfilerTimer && [Link] & ProfileMode) {

// The fallback fiber was added as a deletion during the first pass.
// However, since we're going to remain on the fallback, we no longer want
// to delete it.
[Link] = null;
} else {
primaryChildFragment = updateWorkInProgressOffscreenFiber(
currentPrimaryChildFragment,
primaryChildProps,
);
// Since we're reusing a current tree, we need to reuse the flags, too.
// (We don't do this in legacy mode, because in legacy mode we don't re-use
// the current tree; see previous branch.)
[Link] =
[Link] & StaticMask;
}
let fallbackChildFragment;
if (currentFallbackChildFragment !== null) {
fallbackChildFragment = createWorkInProgress(
currentFallbackChildFragment,
fallbackChildren,
);
} else {
fallbackChildFragment = createFiberFromFragment(
fallbackChildren,
mode,
renderLanes,
null,
);
// Needs a placement effect because the parent (the Suspense boundary) already
// mounted but this is a new fiber.
[Link] |= Placement;
}

[Link] = workInProgress;
[Link] = workInProgress;
[Link] = fallbackChildFragment;
[Link] = primaryChildFragment;

return fallbackChildFragment;
}

function retrySuspenseComponentWithoutHydrating(
current: Fiber,
workInProgress: Fiber,
renderLanes: Lanes,
recoverableError: CapturedValue<mixed> | null,
) {
// Falling back to client rendering. Because this has performance
// implications, it's considered a recoverable error, even though the user
// likely won't observe anything wrong with the UI.
//
// The error is passed in as an argument to enforce that every caller provide
// a custom message, or explicitly opt out (currently the only path that opts
// out is legacy mode; every concurrent path provides an error).
if (recoverableError !== null) {
queueHydrationError(recoverableError);
}

// This will add the old fiber to the deletion list

reconcileChildFibers(workInProgress, [Link], null, renderLanes);

// We're now not suspended nor dehydrated.

const nextProps = [Link];
const primaryChildren = [Link];
const primaryChildFragment = mountSuspensePrimaryChildren(
workInProgress,
primaryChildren,
renderLanes,
);
// Needs a placement effect because the parent (the Suspense boundary) already
// mounted but this is a new fiber.
[Link] |= Placement;
[Link] = null;

return primaryChildFragment;
}

function mountSuspenseFallbackAfterRetryWithoutHydrating(
current: Fiber,
workInProgress: Fiber,
primaryChildren: $FlowFixMe,
fallbackChildren: $FlowFixMe,
renderLanes: Lanes,
) {
const fiberMode = [Link];
const primaryChildProps: OffscreenProps = {
mode: 'visible',
children: primaryChildren,
};
const primaryChildFragment = mountWorkInProgressOffscreenFiber(
primaryChildProps,
fiberMode,
NoLanes,
);
const fallbackChildFragment = createFiberFromFragment(
fallbackChildren,
fiberMode,
renderLanes,
null,
);
// Needs a placement effect because the parent (the Suspense
// boundary) already mounted but this is a new fiber.
[Link] |= Placement;

[Link] = workInProgress;
[Link] = workInProgress;
[Link] = fallbackChildFragment;
[Link] = primaryChildFragment;

if (([Link] & ConcurrentMode) !== NoMode) {

// We will have dropped the effect list which contains the
// deletion. We need to reconcile to delete the current child.
reconcileChildFibers(workInProgress, [Link], null, renderLanes);
}

return fallbackChildFragment;
}

function mountDehydratedSuspenseComponent(
workInProgress: Fiber,
suspenseInstance: SuspenseInstance,
renderLanes: Lanes,
): null | Fiber {
// During the first pass, we'll bail out and not drill into the children.
// Instead, we'll leave the content in place and try to hydrate it later.
if (([Link] & ConcurrentMode) === NoMode) {
if (__DEV__) {
[Link](
'Cannot hydrate Suspense in legacy mode. Switch from ' +
'[Link](element, container) to ' +
'[Link](container, <App />)' +
'.render(element) or remove the Suspense components from ' +
'the server rendered components.',
);
}
[Link] = laneToLanes(SyncLane);
} else if (isSuspenseInstanceFallback(suspenseInstance)) {
// This is a client-only boundary. Since we won't get any content from the
server
// for this, we need to schedule that at a higher priority based on when it
would
// have timed out. In theory we could render it in this pass but it would have
the
// wrong priority associated with it and will prevent hydration of parent path.
// Instead, we'll leave work left on it to render it in a separate commit.

// TODO This time should be the time at which the server rendered response that
is
// a parent to this boundary was displayed. However, since we currently don't
have
// a protocol to transfer that time, we'll just estimate it by using the
current
// time. This will mean that Suspense timeouts are slightly shifted to later
than
// they should be.
// Schedule a normal pri update to render this content.
[Link] = laneToLanes(DefaultHydrationLane);
} else {
// We'll continue hydrating the rest at offscreen priority since we'll already
// be showing the right content coming from the server, it is no rush.
[Link] = laneToLanes(OffscreenLane);
}
return null;
}

function updateDehydratedSuspenseComponent(
current: Fiber,
workInProgress: Fiber,
didSuspend: boolean,
nextProps: any,
suspenseInstance: SuspenseInstance,
suspenseState: SuspenseState,
renderLanes: Lanes,
): null | Fiber {
if (!didSuspend) {
// This is the first render pass. Attempt to hydrate.
pushPrimaryTreeSuspenseHandler(workInProgress);

// We should never be hydrating at this point because it is the first pass,

// but after we've already committed once.
warnIfHydrating();

if (([Link] & ConcurrentMode) === NoMode) {

return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
renderLanes,
null,
);
}

if (isSuspenseInstanceFallback(suspenseInstance)) {
// This boundary is in a permanent fallback state. In this case, we'll never
// get an update and we'll never be able to hydrate the final content. Let's
just try the
// client side render instead.
let digest: ?string;
let message, stack;
if (__DEV__) {
({digest, message, stack} =
getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
} else {
({digest} = getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
}

let capturedValue = null;

// TODO: Figure out a better signal than encoding a magic digest value.
if (!enablePostpone || digest !== 'POSTPONE') {
let error;
if (message) {
// eslint-disable-next-line react-internal/prod-error-codes
error = new Error(message);
} else {
error = new Error(
'The server could not finish this Suspense boundary, likely ' +
'due to an error during server rendering. Switched to ' +
'client rendering.',
);
}
(error: any).digest = digest;
capturedValue = createCapturedValue<mixed>(error, digest, stack);
}
return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
renderLanes,
capturedValue,
);
}

if (
enableLazyContextPropagation &&
// TODO: Factoring is a little weird, since we check this right below, too.
// But don't want to re-arrange the if-else chain until/unless this
// feature lands.
!didReceiveUpdate
) {
// We need to check if any children have context before we decide to bail
// out, so propagate the changes now.
lazilyPropagateParentContextChanges(current, workInProgress, renderLanes);
}

// We use lanes to indicate that a child might depend on context, so if

// any context has changed, we need to treat is as if the input might have
changed.
const hasContextChanged = includesSomeLane(renderLanes, [Link]);
if (didReceiveUpdate || hasContextChanged) {
// This boundary has changed since the first render. This means that we are
now unable to
// hydrate it. We might still be able to hydrate it using a higher priority
lane.
const root = getWorkInProgressRoot();
if (root !== null) {
const attemptHydrationAtLane = getBumpedLaneForHydration(
root,
renderLanes,
);
if (
attemptHydrationAtLane !== NoLane &&
attemptHydrationAtLane !== [Link]
) {
// Intentionally mutating since this render will get interrupted. This
// is one of the very rare times where we mutate the current tree
// during the render phase.
[Link] = attemptHydrationAtLane;
enqueueConcurrentRenderForLane(current, attemptHydrationAtLane);
scheduleUpdateOnFiber(root, current, attemptHydrationAtLane);

// Throw a special object that signals to the work loop that it should
// interrupt the current render.
//
// Because we're inside a React-only execution stack, we don't
// strictly need to throw here — we could instead modify some internal
// work loop state. But using an exception means we don't need to
// check for this case on every iteration of the work loop. So doing
// it this way moves the check out of the fast path.
throw SelectiveHydrationException;
} else {
// We have already tried to ping at a higher priority than we're
rendering with
// so if we got here, we must have failed to hydrate at those levels. We
must
// now give up. Instead, we're going to delete the whole subtree and
instead inject
// a new real Suspense boundary to take its place, which may render
content
// or fallback. This might suspend for a while and if it does we might
still have
// an opportunity to hydrate before this pass commits.
}
}

// If we did not selectively hydrate, we'll continue rendering without

// hydrating. Mark this tree as suspended to prevent it from committing
// outside a transition.
//
// This path should only happen if the hydration lane already suspended.
// Currently, it also happens during sync updates because there is no
// hydration lane for sync updates.
// TODO: We should ideally have a sync hydration lane that we can apply to do
// a pass where we hydrate this subtree in place using the previous Context
and then
// reapply the update afterwards.
if (isSuspenseInstancePending(suspenseInstance)) {
// This is a dehydrated suspense instance. We don't need to suspend
// because we're already showing a fallback.
// TODO: The Fizz runtime might still stream in completed HTML, out-of-
// band. Should we fix this? There's a version of this bug that happens
// during client rendering, too. Needs more consideration.
} else {
renderDidSuspendDelayIfPossible();
}
return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
renderLanes,
null,
);
} else if (isSuspenseInstancePending(suspenseInstance)) {
// This component is still pending more data from the server, so we can't
hydrate its
// content. We treat it as if this component suspended itself. It might seem
as if
// we could just try to render it client-side instead. However, this will
perform a
// lot of unnecessary work and is unlikely to complete since it often will
suspend
// on missing data anyway. Additionally, the server might be able to render
more
// than we can on the client yet. In that case we'd end up with more fallback
states
// on the client than if we just leave it alone. If the server times out or
errors
// these should update this boundary to the permanent Fallback state instead.
// Mark it as having captured (i.e. suspended).
[Link] |= DidCapture;
// Leave the child in place. I.e. the dehydrated fragment.
[Link] = [Link];
// Register a callback to retry this boundary once the server has sent the
result.
const retry = [Link](null, current);
registerSuspenseInstanceRetry(suspenseInstance, retry);
return null;
} else {
// This is the first attempt.
reenterHydrationStateFromDehydratedSuspenseInstance(
workInProgress,
suspenseInstance,
[Link],
);
const primaryChildren = [Link];
const primaryChildFragment = mountSuspensePrimaryChildren(
workInProgress,
primaryChildren,
renderLanes,
);
// Mark the children as hydrating. This is a fast path to know whether this
// tree is part of a hydrating tree. This is used to determine if a child
// node has fully mounted yet, and for scheduling event replaying.
// Conceptually this is similar to Placement in that a new subtree is
// inserted into the React tree here. It just happens to not need DOM
// mutations because it already exists.
[Link] |= Hydrating;
return primaryChildFragment;
}
} else {
// This is the second render pass. We already attempted to hydrated, but
// something either suspended or errored.

if ([Link] & ForceClientRender) {

// Something errored during hydration. Try again without hydrating.
pushPrimaryTreeSuspenseHandler(workInProgress);

[Link] &= ~ForceClientRender;

const capturedValue = createCapturedValue<mixed>(
new Error(
'There was an error while hydrating this Suspense boundary. ' +
'Switched to client rendering.',
),
);
return retrySuspenseComponentWithoutHydrating(
current,
workInProgress,
renderLanes,
capturedValue,
);
} else if (([Link]: null | SuspenseState) !== null) {
// Something suspended and we should still be in dehydrated mode.
// Leave the existing child in place.

// Push to avoid a mismatch

pushFallbackTreeSuspenseHandler(workInProgress);

[Link] = [Link];
// The dehydrated completion pass expects this flag to be there
// but the normal suspense pass doesn't.
[Link] |= DidCapture;
return null;
} else {
// Suspended but we should no longer be in dehydrated mode.
// Therefore we now have to render the fallback.
pushFallbackTreeSuspenseHandler(workInProgress);

const nextPrimaryChildren = [Link];

const nextFallbackChildren = [Link];
const fallbackChildFragment =
mountSuspenseFallbackAfterRetryWithoutHydrating(
current,
workInProgress,
nextPrimaryChildren,
nextFallbackChildren,
renderLanes,
);
const primaryChildFragment: Fiber = ([Link]: any);
[Link] =
mountSuspenseOffscreenState(renderLanes);
[Link] = SUSPENDED_MARKER;
return fallbackChildFragment;
}
}
}
function scheduleSuspenseWorkOnFiber(
fiber: Fiber,
renderLanes: Lanes,
propagationRoot: Fiber,
) {
[Link] = mergeLanes([Link], renderLanes);
const alternate = [Link];
if (alternate !== null) {
[Link] = mergeLanes([Link], renderLanes);
}
scheduleContextWorkOnParentPath([Link], renderLanes, propagationRoot);
}

function findLastContentRow(firstChild: null | Fiber): null | Fiber {

// This is going to find the last row among these children that is already
// showing content on the screen, as opposed to being in fallback state or
// new. If a row has multiple Suspense boundaries, any of them being in the
// fallback state, counts as the whole row being in a fallback state.
// Note that the "rows" will be workInProgress, but any nested children
// will still be current since we haven't rendered them yet. The mounted
// order may not be the same as the new order. We use the new order.
let row = firstChild;
let lastContentRow: null | Fiber = null;
while (row !== null) {
const currentRow = [Link];
// New rows can't be content rows.
if (currentRow !== null && findFirstSuspended(currentRow) === null) {
lastContentRow = row;
}
row = [Link];
}
return lastContentRow;
}

type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together' | void;

function validateRevealOrder(revealOrder: SuspenseListRevealOrder) {

if (__DEV__) {
if (
revealOrder !== undefined &&
revealOrder !== 'forwards' &&
revealOrder !== 'backwards' &&
revealOrder !== 'together' &&
!didWarnAboutRevealOrder[revealOrder]
) {
didWarnAboutRevealOrder[revealOrder] = true;
if (typeof revealOrder === 'string') {
switch ([Link]()) {
case 'together':
case 'forwards':
case 'backwards': {
[Link](
'"%s" is not a valid value for revealOrder on <SuspenseList />. ' +
'Use lowercase "%s" instead.',
revealOrder,
[Link](),
);
break;
}
case 'forward':
case 'backward': {
[Link](
'"%s" is not a valid value for revealOrder on <SuspenseList />. ' +
'React uses the -s suffix in the spelling. Use "%ss" instead.',
revealOrder,
[Link](),
);
break;
}
default:
[Link](
'"%s" is not a supported revealOrder on <SuspenseList />. ' +
'Did you mean "together", "forwards" or "backwards"?',
revealOrder,
);
break;
}
} else {
[Link](
'%s is not a supported value for revealOrder on <SuspenseList />. ' +
'Did you mean "together", "forwards" or "backwards"?',
revealOrder,
);
}
}
}
}

function validateSuspenseListNestedChild(childSlot: mixed, index: number) {

if (__DEV__) {
const isAnArray = isArray(childSlot);
const isIterable =
!isAnArray && typeof getIteratorFn(childSlot) === 'function';
if (isAnArray || isIterable) {
const type = isAnArray ? 'array' : 'iterable';
[Link](
'A nested %s was passed to row #%s in <SuspenseList />. Wrap it in ' +
'an additional SuspenseList to configure its revealOrder: ' +
'<SuspenseList revealOrder=...> ... ' +
'<SuspenseList revealOrder=...>{%s}</SuspenseList> ... ' +
'</SuspenseList>',
type,
index,
type,
);
return false;
}
}
return true;
}

// This can end up rendering this component multiple passes.

// The first pass splits the children fibers into two sets. A head and tail.
// We first render the head. If anything is in fallback state, we do another
// pass through beginWork to rerender all children (including the tail) with
// the force suspend context. If the first render didn't have anything in
// in fallback state. Then we render each row in the tail one-by-one.
// That happens in the completeWork phase without going back to beginWork.
function updateSuspenseListComponent(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
const nextProps = [Link];
const revealOrder: SuspenseListRevealOrder = [Link];
const tailMode: SuspenseListTailMode = [Link];
const newChildren = [Link];

validateRevealOrder(revealOrder);
validateTailOptions(tailMode, revealOrder);
validateSuspenseListChildren(newChildren, revealOrder);

reconcileChildren(current, workInProgress, newChildren, renderLanes);

let suspenseContext: SuspenseContext = [Link];

const shouldForceFallback = hasSuspenseListContext(

suspenseContext,
(ForceSuspenseFallback: SuspenseContext),
);
if (shouldForceFallback) {
suspenseContext = setShallowSuspenseListContext(
suspenseContext,
ForceSuspenseFallback,
);
[Link] |= DidCapture;
} else {
const didSuspendBefore =
current !== null && ([Link] & DidCapture) !== NoFlags;
if (didSuspendBefore) {
// If we previously forced a fallback, we need to schedule work
// on any nested boundaries to let them know to try to render
// again. This is the same as context updating.
propagateSuspenseContextChange(
workInProgress,
[Link],
renderLanes,
);
}
suspenseContext = setDefaultShallowSuspenseListContext(suspenseContext);
}
pushSuspenseListContext(workInProgress, suspenseContext);

let hasWarnedAboutUsingNoValuePropOnContextProvider = false;

function updateContextProvider(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
const providerType: ReactProviderType<any> = [Link];
const context: ReactContext<any> = providerType._context;

const newProps = [Link];

const oldProps = [Link];

const newValue = [Link];

if (__DEV__) {
if (!('value' in newProps)) {
if (!hasWarnedAboutUsingNoValuePropOnContextProvider) {
hasWarnedAboutUsingNoValuePropOnContextProvider = true;
[Link](
'The `value` prop is required for the `<[Link]>`. Did you
misspell it or forget to pass it?',
);
}
}
const providerPropTypes = [Link];

if (providerPropTypes) {
checkPropTypes(providerPropTypes, newProps, 'prop', '[Link]');
}
}

pushProvider(workInProgress, context, newValue);

if (enableLazyContextPropagation) {
// In the lazy propagation implementation, we don't scan for matching
// consumers until something bails out, because until something bails out
// we're going to visit those nodes, anyway. The trade-off is that it shifts
// responsibility to the consumer to track whether something has changed.
} else {
if (oldProps !== null) {
const oldValue = [Link];
if (is(oldValue, newValue)) {
// No change. Bailout early if children are the same.
if (
[Link] === [Link] &&
!hasLegacyContextChanged()
) {
return bailoutOnAlreadyFinishedWork(
current,
workInProgress,
renderLanes,
);
}
} else {
// The context value changed. Search for matching consumers and schedule
// them to update.
propagateContextChange(workInProgress, context, renderLanes);
}
}
}

const newChildren = [Link];

reconcileChildren(current, workInProgress, newChildren, renderLanes);
return [Link];
}

let hasWarnedAboutUsingContextAsConsumer = false;

if (__DEV__) {
if (typeof render !== 'function') {
[Link](
'A context consumer was rendered with multiple children, or a child ' +
"that isn't a function. A context consumer expects a single child " +
'that is a function. If you did pass a function, make sure there ' +
'is no trailing or leading whitespace around it.',
);
}
}

prepareToReadContext(workInProgress, renderLanes);
const newValue = readContext(context);
if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
}
let newChildren;
if (__DEV__) {
[Link] = workInProgress;
setIsRendering(true);
newChildren = render(newValue);
setIsRendering(false);
} else {
newChildren = render(newValue);
}
if (enableSchedulingProfiler) {
markComponentRenderStopped();
}

// React DevTools reads this flag.

[Link] |= PerformedWork;
reconcileChildren(current, workInProgress, newChildren, renderLanes);
return [Link];
}

function updateScopeComponent(
current: null | Fiber,
workInProgress: Fiber,
renderLanes: Lanes,
) {
const nextProps = [Link];
const nextChildren = [Link];

reconcileChildren(current, workInProgress, nextChildren, renderLanes);

return [Link];
}

export function markWorkInProgressReceivedUpdate() {

didReceiveUpdate = true;
}

export function checkIfWorkInProgressReceivedUpdate(): boolean {

return didReceiveUpdate;
}

if (enableProfilerTimer) {
// Don't update "base" render times for bailouts.
stopProfilerTimerIfRunning(workInProgress);
}

markSkippedUpdateLanes([Link]);

// Check if the children have any pending work.

if (!includesSomeLane(renderLanes, [Link])) {
// The children don't have any work either. We can skip them.
// TODO: Once we add back resuming, we should check if the children are
// a work-in-progress set. If so, we need to transfer their effects.

if (enableLazyContextPropagation && current !== null) {

// Before bailing out, check if there are any context changes in
// the children.
lazilyPropagateParentContextChanges(current, workInProgress, renderLanes);
if (!includesSomeLane(renderLanes, [Link])) {
return null;
}
} else {
return null;
}
}

// This fiber doesn't have work, but its subtree does. Clone the child
// fibers and continue.
cloneChildFibers(current, workInProgress);
return [Link];
}

function remountFiber(
current: Fiber,
oldWorkInProgress: Fiber,
newWorkInProgress: Fiber,
): Fiber | null {
if (__DEV__) {
const returnFiber = [Link];
if (returnFiber === null) {
// eslint-disable-next-line react-internal/prod-error-codes
throw new Error('Cannot swap the root fiber.');
}

// Disconnect from the old current.

// It will get deleted.
[Link] = null;
[Link] = null;

// Connect to the new tree.

[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];

// Replace the child/sibling pointers above it.

if (oldWorkInProgress === [Link]) {
[Link] = newWorkInProgress;
} else {
let prevSibling = [Link];
if (prevSibling === null) {
// eslint-disable-next-line react-internal/prod-error-codes
throw new Error('Expected parent to have a child.');
}
// $FlowFixMe[incompatible-use] found when upgrading Flow
while ([Link] !== oldWorkInProgress) {
// $FlowFixMe[incompatible-use] found when upgrading Flow
prevSibling = [Link];
if (prevSibling === null) {
// eslint-disable-next-line react-internal/prod-error-codes
throw new Error('Expected to find the previous sibling.');
}
}
// $FlowFixMe[incompatible-use] found when upgrading Flow
[Link] = newWorkInProgress;
}

// Delete the old fiber and place the new one.

// Since the old fiber is disconnected, we have to schedule it manually.
const deletions = [Link];
if (deletions === null) {
[Link] = [current];
[Link] |= ChildDeletion;
} else {
[Link](current);
}

[Link] |= Placement;

// Restart work from the new fiber.

return newWorkInProgress;
} else {
throw new Error(
'Did not expect this call in production. ' +
'This is a bug in React. Please file an issue.',
);
}
}

function attemptEarlyBailoutIfNoScheduledUpdate(
current: Fiber,
workInProgress: Fiber,
renderLanes: Lanes,
) {
// This fiber does not have any pending work. Bailout without entering
// the begin phase. There's still some bookkeeping we that needs to be done
// in this optimized path, mostly pushing stuff onto the stack.
switch ([Link]) {
case HostRoot:
pushHostRootContext(workInProgress);
const root: FiberRoot = [Link];
pushRootTransition(workInProgress, root, renderLanes);

if (enableTransitionTracing) {
pushRootMarkerInstance(workInProgress);
}

if (enableCache) {
const cache: Cache = [Link];
pushCacheProvider(workInProgress, cache);
}
resetHydrationState();
break;
case HostSingleton:
case HostComponent:
pushHostContext(workInProgress);
break;
case ClassComponent: {
const Component = [Link];
if (isLegacyContextProvider(Component)) {
pushLegacyContextProvider(workInProgress);
}
break;
}
case HostPortal:
pushHostContainer(workInProgress, [Link]);
break;
case ContextProvider: {
const newValue = [Link];
const context: ReactContext<any> = [Link]._context;
pushProvider(workInProgress, context, newValue);
break;
}
case Profiler:
if (enableProfilerTimer) {
// Profiler should only call onRender when one of its descendants actually
rendered.
const hasChildWork = includesSomeLane(
renderLanes,
[Link],
);
if (hasChildWork) {
[Link] |= Update;
}

if (enableProfilerCommitHooks) {
// Reset effect durations for the next eventual effect phase.
// These are reset during render to allow the DevTools commit hook a
chance to read them,
const stateNode = [Link];
[Link] = 0;
[Link] = 0;
}
}
break;
case SuspenseComponent: {
const state: SuspenseState | null = [Link];
if (state !== null) {
if ([Link] !== null) {
// We're not going to render the children, so this is just to maintain
// push/pop symmetry
pushPrimaryTreeSuspenseHandler(workInProgress);
// We know that this component will suspend again because if it has
// been unsuspended it has committed as a resolved Suspense component.
// If it needs to be retried, it should have work scheduled on it.
[Link] |= DidCapture;
// We should never render the children of a dehydrated boundary until we
// upgrade it. We return null instead of bailoutOnAlreadyFinishedWork.
return null;
}

// If this boundary is currently timed out, we need to decide

// whether to retry the primary children, or to skip over it and
// go straight to the fallback. Check the priority of the primary
// child fragment.
const primaryChildFragment: Fiber = ([Link]: any);
const primaryChildLanes = [Link];
if (includesSomeLane(renderLanes, primaryChildLanes)) {
// The primary children have pending work. Use the normal path
// to attempt to render the primary children again.
return updateSuspenseComponent(current, workInProgress, renderLanes);
} else {
// The primary child fragment does not have pending work marked
// on it
pushPrimaryTreeSuspenseHandler(workInProgress);
// The primary children do not have pending work with sufficient
// priority. Bailout.
const child = bailoutOnAlreadyFinishedWork(
current,
workInProgress,
renderLanes,
);
if (child !== null) {
// The fallback children have pending work. Skip over the
// primary children and work on the fallback.
return [Link];
} else {
// Note: We can return `null` here because we already checked
// whether there were nested context consumers, via the call to
// `bailoutOnAlreadyFinishedWork` above.
return null;
}
}
} else {
pushPrimaryTreeSuspenseHandler(workInProgress);
}
break;
}
case SuspenseListComponent: {
const didSuspendBefore = ([Link] & DidCapture) !== NoFlags;

let hasChildWork = includesSomeLane(

renderLanes,
[Link],
);

if (enableLazyContextPropagation && !hasChildWork) {

// Context changes may not have been propagated yet. We need to do
// that now, before we can decide whether to bail out.
// TODO: We use `childLanes` as a heuristic for whether there is
// remaining work in a few places, including
// `bailoutOnAlreadyFinishedWork` and
// `updateDehydratedSuspenseComponent`. We should maybe extract this
// into a dedicated function.
lazilyPropagateParentContextChanges(
current,
workInProgress,
renderLanes,
);
hasChildWork = includesSomeLane(renderLanes, [Link]);
}

if (didSuspendBefore) {
if (hasChildWork) {
// If something was in fallback state last time, and we have all the
// same children then we're still in progressive loading state.
// Something might get unblocked by state updates or retries in the
// tree which will affect the tail. So we need to use the normal
// path to compute the correct tail.
return updateSuspenseListComponent(
current,
workInProgress,
renderLanes,
);
}
// If none of the children had any work, that means that none of
// them got retried so they'll still be blocked in the same way
// as before. We can fast bail out.
[Link] |= DidCapture;
}

// If nothing suspended before and we're rendering the same children,

// then the tail doesn't matter. Anything new that suspends will work
// in the "together" mode, so we can continue from the state we had.
const renderState = [Link];
if (renderState !== null) {
// Reset to the "together" mode in case we've started a different
// update in the past but didn't complete it.
[Link] = null;
[Link] = null;
[Link] = null;
}
pushSuspenseListContext(workInProgress, [Link]);

if (hasChildWork) {
break;
} else {
// If none of the children had any work, that means that none of
// them got retried so they'll still be blocked in the same way
// as before. We can fast bail out.
return null;
}
}
case OffscreenComponent:
case LegacyHiddenComponent: {
// Need to check if the tree still needs to be deferred. This is
// almost identical to the logic used in the normal update path,
// so we'll just enter that. The only difference is we'll bail out
// at the next level instead of this one, because the child props
// have not changed. Which is fine.
// TODO: Probably should refactor `beginWork` to split the bailout
// path from the normal path. I'm tempted to do a labeled break here
// but I won't :)
[Link] = NoLanes;
return updateOffscreenComponent(current, workInProgress, renderLanes);
}
case CacheComponent: {
if (enableCache) {
const cache: Cache = [Link];
pushCacheProvider(workInProgress, cache);
}
break;
}
case TracingMarkerComponent: {
if (enableTransitionTracing) {
const instance: TracingMarkerInstance | null = [Link];
if (instance !== null) {
pushMarkerInstance(workInProgress, instance);
}
}
}
}
return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

function beginWork(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
): Fiber | null {
if (__DEV__) {
if (workInProgress._debugNeedsRemount && current !== null) {
// This will restart the begin phase with a new fiber.
return remountFiber(
current,
workInProgress,
createFiberFromTypeAndProps(
[Link],
[Link],
[Link],
workInProgress._debugSource || null,
workInProgress._debugOwner || null,
[Link],
[Link],
),
);
}
}

if (current !== null) {

const oldProps = [Link];
const newProps = [Link];

if (
oldProps !== newProps ||
hasLegacyContextChanged() ||
// Force a re-render if the implementation changed due to hot reload:
(__DEV__ ? [Link] !== [Link] : false)
) {
// If props or context changed, mark the fiber as having performed work.
// This may be unset if the props are determined to be equal later (memo).
didReceiveUpdate = true;
} else {
// Neither props nor legacy context changes. Check if there's a pending
// update or context change.
const hasScheduledUpdateOrContext = checkScheduledUpdateOrContext(
current,
renderLanes,
);
if (
!hasScheduledUpdateOrContext &&
// If this is the second pass of an error or suspense boundary, there
// may not be work scheduled on `current`, so we check for this flag.
([Link] & DidCapture) === NoFlags
) {
// No pending updates or context. Bail out now.
didReceiveUpdate = false;
return attemptEarlyBailoutIfNoScheduledUpdate(
current,
workInProgress,
renderLanes,
);
}
if (([Link] & ForceUpdateForLegacySuspense) !== NoFlags) {
// This is a special case that only exists for legacy mode.
// See [Link]
didReceiveUpdate = true;
} else {
// An update was scheduled on this fiber, but there are no new props
// nor legacy context. Set this to false. If an update queue or context
// consumer produces a changed value, it will set this to true. Otherwise,
// the component will assume the children have not changed and bail out.
didReceiveUpdate = false;
}
}
} else {
didReceiveUpdate = false;

if (getIsHydrating() && isForkedChild(workInProgress)) {

// Check if this child belongs to a list of muliple children in
// its parent.
//
// In a true multi-threaded implementation, we would render children on
// parallel threads. This would represent the beginning of a new render
// thread for this subtree.
//
// We only use this for id generation during hydration, which is why the
// logic is located in this special branch.
const slotIndex = [Link];
const numberOfForks = getForksAtLevel(workInProgress);
pushTreeId(workInProgress, numberOfForks, slotIndex);
}
}

// Before entering the begin phase, clear pending update priority.

// TODO: This assumes that we're about to evaluate the component and process
// the update queue. However, there's an exception: SimpleMemoComponent
// sometimes bails out later in the begin phase. This indicates that we should
// move this assignment out of the common path and into each branch.
[Link] = NoLanes;

switch ([Link]) {
case IndeterminateComponent: {
return mountIndeterminateComponent(
current,
workInProgress,
[Link],
renderLanes,
);
}
case LazyComponent: {
const elementType = [Link];
return mountLazyComponent(
current,
workInProgress,
elementType,
renderLanes,
);
}
case FunctionComponent: {
const Component = [Link];
const unresolvedProps = [Link];
const resolvedProps =
[Link] === Component
? unresolvedProps
: resolveDefaultProps(Component, unresolvedProps);
return updateFunctionComponent(
current,
workInProgress,
Component,
resolvedProps,
renderLanes,
);
}
case ClassComponent: {
const Component = [Link];
const unresolvedProps = [Link];
const resolvedProps =
[Link] === Component
? unresolvedProps
: resolveDefaultProps(Component, unresolvedProps);
return updateClassComponent(
current,
workInProgress,
Component,
resolvedProps,
renderLanes,
);
}
case HostRoot:
return updateHostRoot(current, workInProgress, renderLanes);
case HostHoistable:
if (enableFloat && supportsResources) {
return updateHostHoistable(current, workInProgress, renderLanes);
}
// Fall through
case HostSingleton:
if (enableHostSingletons && supportsSingletons) {
return updateHostSingleton(current, workInProgress, renderLanes);
}
// Fall through
case HostComponent:
return updateHostComponent(current, workInProgress, renderLanes);
case HostText:
return updateHostText(current, workInProgress);
case SuspenseComponent:
return updateSuspenseComponent(current, workInProgress, renderLanes);
case HostPortal:
return updatePortalComponent(current, workInProgress, renderLanes);
case ForwardRef: {
const type = [Link];
const unresolvedProps = [Link];
const resolvedProps =
[Link] === type
? unresolvedProps
: resolveDefaultProps(type, unresolvedProps);
return updateForwardRef(
current,
workInProgress,
type,
resolvedProps,
renderLanes,
);
}
case Fragment:
return updateFragment(current, workInProgress, renderLanes);
case Mode:
return updateMode(current, workInProgress, renderLanes);
case Profiler:
return updateProfiler(current, workInProgress, renderLanes);
case ContextProvider:
return updateContextProvider(current, workInProgress, renderLanes);
case ContextConsumer:
return updateContextConsumer(current, workInProgress, renderLanes);
case MemoComponent: {
const type = [Link];
const unresolvedProps = [Link];
// Resolve outer props first, then resolve inner props.
let resolvedProps = resolveDefaultProps(type, unresolvedProps);
if (__DEV__) {
if ([Link] !== [Link]) {
const outerPropTypes = [Link];
if (outerPropTypes) {
checkPropTypes(
outerPropTypes,
resolvedProps, // Resolved for outer only
'prop',
getComponentNameFromType(type),
);
}
}
}
resolvedProps = resolveDefaultProps([Link], resolvedProps);
return updateMemoComponent(
current,
workInProgress,
type,
resolvedProps,
renderLanes,
);
}
case SimpleMemoComponent: {
return updateSimpleMemoComponent(
current,
workInProgress,
[Link],
[Link],
renderLanes,
);
}
case IncompleteClassComponent: {
const Component = [Link];
const unresolvedProps = [Link];
const resolvedProps =
[Link] === Component
? unresolvedProps
: resolveDefaultProps(Component, unresolvedProps);
return mountIncompleteClassComponent(
current,
workInProgress,
Component,
resolvedProps,
renderLanes,
);
}
case SuspenseListComponent: {
return updateSuspenseListComponent(current, workInProgress, renderLanes);
}
case ScopeComponent: {
if (enableScopeAPI) {
return updateScopeComponent(current, workInProgress, renderLanes);
}
break;
}
case OffscreenComponent: {
return updateOffscreenComponent(current, workInProgress, renderLanes);
}
case LegacyHiddenComponent: {
if (enableLegacyHidden) {
return updateLegacyHiddenComponent(
current,
workInProgress,
renderLanes,
);
}
break;
}
case CacheComponent: {
if (enableCache) {
return updateCacheComponent(current, workInProgress, renderLanes);
}
break;
}
case TracingMarkerComponent: {
if (enableTransitionTracing) {
return updateTracingMarkerComponent(
current,
workInProgress,
renderLanes,
);
}
break;
}
}

throw new Error(

`Unknown unit of work tag (${[Link]}). This error is likely caused
by a bug in ` +
'React. Please file an issue.',
);
}

export {beginWork};

Dev Tools Fiber Component Stack
No ratings yet
Dev Tools Fiber Component Stack
2 pages
Renderer
No ratings yet
Renderer
79 pages
React Development
No ratings yet
React Development
60 pages
React Development
No ratings yet
React Development
35 pages
React Fiber: Incremental Rendering Explained
No ratings yet
React Fiber: Incremental Rendering Explained
7 pages
3 430651c5 Chunk Js LICENSE
No ratings yet
3 430651c5 Chunk Js LICENSE
1 page
Components
No ratings yet
Components
7 pages
Main F599fde6 Js LICENSE
No ratings yet
Main F599fde6 Js LICENSE
1 page
React Dom Test Utils - Development
No ratings yet
React Dom Test Utils - Development
28 pages
React DevTools Testing Guide
No ratings yet
React DevTools Testing Guide
50 pages
Main 4a6fabe5 Js LICENSE
No ratings yet
Main 4a6fabe5 Js LICENSE
2 pages
Main Js LICENSE
No ratings yet
Main Js LICENSE
2 pages
Bundle Js LICENSE
No ratings yet
Bundle Js LICENSE
2 pages
Main - js.LICENSE
No ratings yet
Main - js.LICENSE
2 pages
React Profiler Hooks Overview
No ratings yet
React Profiler Hooks Overview
17 pages
ES7 React
No ratings yet
ES7 React
16 pages
Advanced React Interview Question 1
No ratings yet
Advanced React Interview Question 1
4 pages
Main 3d703519 Js liceNSE
No ratings yet
Main 3d703519 Js liceNSE
2 pages
Main Js LICENSE
No ratings yet
Main Js LICENSE
2 pages
React Interview Questions
No ratings yet
React Interview Questions
11 pages
JavaScript Notes
No ratings yet
JavaScript Notes
125 pages
Main 2dcc8598 Js LICENSE
No ratings yet
Main 2dcc8598 Js LICENSE
2 pages
Dev Tools Component Stack Frame
No ratings yet
Dev Tools Component Stack Frame
6 pages
React DevTools Agent Code Overview
No ratings yet
React DevTools Agent Code Overview
15 pages
Index De7520b4
No ratings yet
Index De7520b4
1,024 pages
React Notes
No ratings yet
React Notes
48 pages
ReactHooksWithNoopRenderer Test
No ratings yet
ReactHooksWithNoopRenderer Test
75 pages
React and Redux Code Snippets Guide
No ratings yet
React and Redux Code Snippets Guide
20 pages
WWW fd79b Js LICENSE
No ratings yet
WWW fd79b Js LICENSE
2 pages
NSLog
No ratings yet
NSLog
154 pages
Wallet-Drawer Bundle Js LICENSE
No ratings yet
Wallet-Drawer Bundle Js LICENSE
2 pages
React JS Interview QA
No ratings yet
React JS Interview QA
3 pages
Ui Js License
No ratings yet
Ui Js License
3 pages
Vendor Bundle Js LICENSE
No ratings yet
Vendor Bundle Js LICENSE
2 pages
Senior Web Developer Interview Q&A
No ratings yet
Senior Web Developer Interview Q&A
11 pages
REACtjs
No ratings yet
REACtjs
7 pages
React Three Fiber Universe Component
No ratings yet
React Three Fiber Universe Component
4 pages
React Best Practices and Productivity Tips
No ratings yet
React Best Practices and Productivity Tips
31 pages
Main C8349da6 Js LICENSE
No ratings yet
Main C8349da6 Js LICENSE
3 pages
08-07-2024
No ratings yet
08-07-2024
4 pages
Vendor 898b0cbecdb72f285696 Bundle Js LICENSE
No ratings yet
Vendor 898b0cbecdb72f285696 Bundle Js LICENSE
1 page
React Suspense with Noop Renderer Tests
No ratings yet
React Suspense with Noop Renderer Tests
69 pages
Preprocessdata Test
No ratings yet
Preprocessdata Test
42 pages
Main c9c76f97 Js LICENSE
No ratings yet
Main c9c76f97 Js LICENSE
3 pages
(DDX
No ratings yet
(DDX
4 pages
All SRC Files
No ratings yet
All SRC Files
102 pages
Log
No ratings yet
Log
12 pages
React Performance Optimization Tips
No ratings yet
React Performance Optimization Tips
1 page
React Interview CheatSheet
No ratings yet
React Interview CheatSheet
2 pages
Main 5d1e6228 Js LICENSE
No ratings yet
Main 5d1e6228 Js LICENSE
3 pages
React Dom Unstable Native Dependencies - Development
No ratings yet
React Dom Unstable Native Dependencies - Development
29 pages
Reactv 16 Cheatsheet
No ratings yet
Reactv 16 Cheatsheet
3 pages
Main 70411507 Js License
No ratings yet
Main 70411507 Js License
2 pages
Main Js LICENSE
No ratings yet
Main Js LICENSE
1 page
Text Behind Image Main
No ratings yet
Text Behind Image Main
320 pages
React Notes
No ratings yet
React Notes
6 pages
Main-Internal Js LICENSE
No ratings yet
Main-Internal Js LICENSE
2 pages
Log
No ratings yet
Log
3 pages
Main 2805351b Js LICENSE
No ratings yet
Main 2805351b Js LICENSE
12 pages