mirror of
https://github.com/zebrajr/react.git
synced 2025-12-07 12:20:38 +01:00
393c452e39
Background: State updates that are scheduled in a layout effect (useLayoutEffect or componentDidMount / componentDidUpdate) get processed synchronously by React before it yields to the browser to paint. This is done so that components can adjust their layout (e.g. position and size a tooltip) without any visible shifting being seen by users. This type of update is often called a "nested update" or a "cascading update". Because they delay paint, nested updates are considered expensive and should be avoided when possible. For example, effects that do not impact layout (e.g. adding event handlers, logging impressions) can be safely deferred to the passive effect phase by using useEffect instead. This PR updates the Profiler API to explicitly flag nested updates so they can be monitored for and avoided when possible. Implementation: I considered a few approaches for this. Add a new callback (e.g. onNestedUpdateScheduled) to the Profiler that gets called when a nested updates gets scheduled. Add an additional boolean parameter to the end of existing callbacks (e.g. wasNestedUpdate). Update the phase param to add an additional variant: "mount", "update", or "nested-update" (new). I think the third option makes for the best API so that's what I've implemented in this PR. Because the Profiler API is stable, this change will need to remain behind a feature flag until v18. I've turned the feature flag on for Facebook builds though after confirming that Web Speed does not currently make use of the phase parameter. Quirks: One quirk about the implementation I've chosen is that errors thrown during the layout phase are also reported as nested updates. I believe this is appropriate since these errors get processed synchronously and block paint. Errors thrown during render or from within passive effects are not affected by this change.
61 lines
2.5 KiB
JavaScript
61 lines
2.5 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its 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 typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
|
|
import typeof * as ExportsType from './ReactFeatureFlags.testing';
|
|
|
|
export const debugRenderPhaseSideEffectsForStrictMode = false;
|
|
export const enableDebugTracing = false;
|
|
export const enableSchedulingProfiler = false;
|
|
export const warnAboutDeprecatedLifecycles = true;
|
|
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
|
|
export const enableProfilerTimer = __PROFILE__;
|
|
export const enableProfilerCommitHooks = false;
|
|
export const enableProfilerNestedUpdatePhase = false;
|
|
export const enableSchedulerTracing = __PROFILE__;
|
|
export const enableSuspenseServerRenderer = false;
|
|
export const enableSelectiveHydration = false;
|
|
export const enableLazyElements = false;
|
|
export const disableJavaScriptURLs = false;
|
|
export const disableInputAttributeSyncing = false;
|
|
export const enableSchedulerDebugging = false;
|
|
export const enableFundamentalAPI = false;
|
|
export const enableScopeAPI = false;
|
|
export const enableCreateEventHandleAPI = false;
|
|
export const warnAboutUnmockedScheduler = false;
|
|
export const enableSuspenseCallback = false;
|
|
export const warnAboutDefaultPropsOnFunctionComponents = false;
|
|
export const warnAboutStringRefs = false;
|
|
export const disableLegacyContext = false;
|
|
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
|
|
export const enableTrustedTypesIntegration = false;
|
|
export const disableTextareaChildren = false;
|
|
export const disableModulePatternComponents = false;
|
|
export const warnUnstableRenderSubtreeIntoContainer = false;
|
|
export const warnAboutSpreadingKeyToJSX = false;
|
|
export const enableComponentStackLocations = true;
|
|
export const enableLegacyFBSupport = false;
|
|
export const enableFilterEmptyStringAttributesDOM = false;
|
|
|
|
export const enableNewReconciler = false;
|
|
export const deferRenderPhaseUpdateToNextBatch = true;
|
|
export const decoupleUpdatePriorityFromScheduler = false;
|
|
export const enableDiscreteEventFlushingChange = false;
|
|
|
|
export const enableDoubleInvokingEffects = false;
|
|
export const enableUseRefAccessWarning = false;
|
|
|
|
export const enableRecursiveCommitTraversal = false;
|
|
|
|
// Flow magic to verify the exports of this file match the original version.
|
|
// eslint-disable-next-line no-unused-vars
|
|
type Check<_X, Y: _X, X: Y = _X> = null;
|
|
// eslint-disable-next-line no-unused-expressions
|
|
(null: Check<ExportsType, FeatureFlagsType>);
|