mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
Today if something suspends, React will continue rendering the siblings of that component. Our original rationale for prerendering the siblings of a suspended component was to initiate any lazy fetches that they might contain. This was when we were more bullish about lazy fetching being a good idea some of the time (when combined with prefetching), as opposed to our latest thinking, which is that it's almost always a bad idea. Another rationale for the original behavior was that the render was I/O bound, anyway, so we might as do some extra work in the meantime. But this was before we had the concept of instant loading states: when navigating to a new screen, it's better to show a loading state as soon as you can (often a skeleton UI), rather than delay the transition. (There are still cases where we block the render, when a suitable loading state is not available; it's just not _all_ cases where something suspends.) So the biggest issue with our existing implementation is that the prerendering of the siblings happens within the same render pass as the one that suspended — _before_ the loading state appears. What we should do instead is immediately unwind the stack as soon as something suspends, to unblock the loading state. If we want to preserve the ability to prerender the siblings, what we could do is schedule special render pass immediately after the fallback is displayed. This is likely what we'll do in the future. However, in the new implementation of `use`, there's another reason we don't prerender siblings: so we can preserve the state of the stack when something suspends, and resume where we left of when the promise resolves without replaying the parents. The only way to do this currently is to suspend the entire work loop. Fiber does not currently support rendering multiple siblings in "parallel". Once you move onto the next sibling, the stack of the previous sibling is discarded and cannot be restored. We do plan to implement this feature, but it will require a not-insignificant refactor. Given that lazy data fetching is already bad for performance, the best trade off for now seems to be to disable prerendering of siblings. This gives us the best performance characteristics when you're following best practices (i.e. hoist data fetches to Server Components or route loaders), at the expense of making an already bad pattern a bit worse. Later, when we implement resumable context stacks, we can reenable sibling prerendering. Though even then the use case will mostly be to prerender the CPU-bound work, not lazy fetches.
251 lines
10 KiB
JavaScript
251 lines
10 KiB
JavaScript
/**
|
|
* 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 strict
|
|
*/
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Land or remove (zero effort)
|
|
//
|
|
// Flags that can likely be deleted or landed without consequences
|
|
// -----------------------------------------------------------------------------
|
|
|
|
export const enableComponentStackLocations = true;
|
|
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Killswitch
|
|
//
|
|
// Flags that exist solely to turn off a change in case it causes a regression
|
|
// when it rolls out to prod. We should remove these as soon as possible.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// This is phrased as a negative so that if someone forgets to add a GK, the
|
|
// default is to enable the feature. It should only be overridden if there's
|
|
// a regression in prod.
|
|
export const revertRemovalOfSiblingPrerendering = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Land or remove (moderate effort)
|
|
//
|
|
// Flags that can be probably deleted or landed, but might require extra effort
|
|
// like migrating internal callers or performance testing.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// This rolled out to 10% public in www, so we should be able to land, but some
|
|
// internal tests need to be updated. The open source behavior is correct.
|
|
export const skipUnmountedBoundaries = true;
|
|
|
|
// TODO: Finish rolling out in www
|
|
export const enableClientRenderFallbackOnTextMismatch = true;
|
|
|
|
// TODO: Need to review this code one more time before landing
|
|
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay =
|
|
true;
|
|
|
|
// Recoil still uses useMutableSource in www, need to delete
|
|
export const enableUseMutableSource = false;
|
|
|
|
// Not sure if www still uses this. We don't have a replacement but whatever we
|
|
// replace it with will likely be different than what's already there, so we
|
|
// probably should just delete it as long as nothing in www relies on it.
|
|
export const enableSchedulerDebugging = false;
|
|
|
|
// Need to remove didTimeout argument from Scheduler before landing
|
|
export const disableSchedulerTimeoutInWorkLoop = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Slated for removal in the future (significant effort)
|
|
//
|
|
// These are experiments that didn't work out, and never shipped, but we can't
|
|
// delete from the codebase until we migrate internal callers.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Add a callback property to suspense to notify which promises are currently
|
|
// in the update queue. This allows reporting and tracing of what is causing
|
|
// the user to see a loading state.
|
|
//
|
|
// Also allows hydration callbacks to fire when a dehydrated boundary gets
|
|
// hydrated or deleted.
|
|
//
|
|
// This will eventually be replaced by the Transition Tracing proposal.
|
|
export const enableSuspenseCallback = false;
|
|
|
|
// Experimental Scope support.
|
|
export const enableScopeAPI = false;
|
|
|
|
// Experimental Create Event Handle API.
|
|
export const enableCreateEventHandleAPI = false;
|
|
|
|
// Support legacy Primer support on internal FB www
|
|
export const enableLegacyFBSupport = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Ongoing experiments
|
|
//
|
|
// These are features that we're either actively exploring or are reasonably
|
|
// likely to include in an upcoming release.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
export const enableCache = true;
|
|
export const enableLegacyCache = __EXPERIMENTAL__;
|
|
export const enableCacheElement = __EXPERIMENTAL__;
|
|
export const enableFetchInstrumentation = true;
|
|
|
|
export const enableTransitionTracing = false;
|
|
|
|
// No known bugs, but needs performance testing
|
|
export const enableLazyContextPropagation = false;
|
|
|
|
// FB-only usage. The new API has different semantics.
|
|
export const enableLegacyHidden = false;
|
|
|
|
// Enables unstable_avoidThisFallback feature in Fiber
|
|
export const enableSuspenseAvoidThisFallback = false;
|
|
// Enables unstable_avoidThisFallback feature in Fizz
|
|
export const enableSuspenseAvoidThisFallbackFizz = false;
|
|
|
|
export const enableCPUSuspense = __EXPERIMENTAL__;
|
|
|
|
export const enableHostSingletons = true;
|
|
|
|
export const enableFloat = true;
|
|
|
|
export const enableUseHook = true;
|
|
|
|
// Enables unstable_useMemoCache hook, intended as a compilation target for
|
|
// auto-memoization.
|
|
export const enableUseMemoCacheHook = __EXPERIMENTAL__;
|
|
|
|
export const enableUseEffectEventHook = __EXPERIMENTAL__;
|
|
|
|
// Test in www before enabling in open source.
|
|
// Enables DOM-server to stream its instruction set as data-attributes
|
|
// (handled with an MutationObserver) instead of inline-scripts
|
|
export const enableFizzExternalRuntime = true;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Chopping Block
|
|
//
|
|
// Planned feature deprecations and breaking changes. Sorted roughly in order of
|
|
// when we plan to enable them.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// This flag enables Strict Effects by default. We're not turning this on until
|
|
// after 18 because it requires migration work. Recommendation is to use
|
|
// <StrictMode /> to gradually upgrade components.
|
|
// If TRUE, trees rendered with createRoot will be StrictEffectsMode.
|
|
// If FALSE, these trees will be StrictLegacyMode.
|
|
export const createRootStrictEffectsByDefault = false;
|
|
|
|
export const disableModulePatternComponents = false;
|
|
|
|
export const disableLegacyContext = false;
|
|
|
|
export const enableUseRefAccessWarning = false;
|
|
|
|
export const enableUnifiedSyncLane = __EXPERIMENTAL__;
|
|
|
|
// Adds an opt-in to time slicing for updates that aren't wrapped in
|
|
// startTransition. Only relevant when enableSyncDefaultUpdates is disabled.
|
|
export const allowConcurrentByDefault = false;
|
|
|
|
// Updates that occur in the render phase are not officially supported. But when
|
|
// they do occur, we defer them to a subsequent render by picking a lane that's
|
|
// not currently rendering. We treat them the same as if they came from an
|
|
// interleaved event. Remove this flag once we have migrated to the
|
|
// new behavior.
|
|
// NOTE: Not sure if we'll end up doing this or not.
|
|
export const deferRenderPhaseUpdateToNextBatch = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// React DOM Chopping Block
|
|
//
|
|
// Similar to main Chopping Block but only flags related to React DOM. These are
|
|
// grouped because we will likely batch all of them into a single major release.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Disable support for comment nodes as React DOM containers. Already disabled
|
|
// in open source, but www codebase still relies on it. Need to remove.
|
|
export const disableCommentsAsDOMContainers = true;
|
|
|
|
// Disable javascript: URL strings in href for XSS protection.
|
|
export const disableJavaScriptURLs = false;
|
|
|
|
export const enableTrustedTypesIntegration = false;
|
|
|
|
// Prevent the value and checked attributes from syncing with their related
|
|
// DOM properties
|
|
export const disableInputAttributeSyncing = false;
|
|
|
|
// Remove IE and MsApp specific workarounds for innerHTML
|
|
export const disableIEWorkarounds = __EXPERIMENTAL__;
|
|
|
|
// Filter certain DOM attributes (e.g. src, href) if their values are empty
|
|
// strings. This prevents e.g. <img src=""> from making an unnecessary HTTP
|
|
// request for certain browsers.
|
|
export const enableFilterEmptyStringAttributesDOM = __EXPERIMENTAL__;
|
|
|
|
// Changes the behavior for rendering custom elements in both server rendering
|
|
// and client rendering, mostly to allow JSX attributes to apply to the custom
|
|
// element's object properties instead of only HTML attributes.
|
|
// https://github.com/facebook/react/issues/11347
|
|
export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
|
|
|
|
// Disables children for <textarea> elements
|
|
export const disableTextareaChildren = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Debugging and DevTools
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
|
|
// for an experimental timeline tool.
|
|
export const enableSchedulingProfiler = __PROFILE__;
|
|
|
|
// Helps identify side effects in render-phase lifecycle hooks and setState
|
|
// reducers by double invoking them in StrictLegacyMode.
|
|
export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
|
|
|
|
// To preserve the "Pause on caught exceptions" behavior of the debugger, we
|
|
// replay the begin phase of a failed component inside invokeGuardedCallback.
|
|
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
|
|
|
|
// Gather advanced timing metrics for Profiler subtrees.
|
|
export const enableProfilerTimer = __PROFILE__;
|
|
|
|
// Record durations for commit and passive effects phases.
|
|
export const enableProfilerCommitHooks = __PROFILE__;
|
|
|
|
// Phase param passed to onRender callback differentiates between an "update" and a "cascading-update".
|
|
export const enableProfilerNestedUpdatePhase = __PROFILE__;
|
|
|
|
// Adds verbose console logging for e.g. state updates, suspense, and work loop
|
|
// stuff. Intended to enable React core members to more easily debug scheduling
|
|
// issues in DEV builds.
|
|
export const enableDebugTracing = false;
|
|
|
|
// Track which Fiber(s) schedule render work.
|
|
export const enableUpdaterTracking = __PROFILE__;
|
|
|
|
// Only enabled in RN, related to enableComponentStackLocations
|
|
export const disableNativeComponentFrames = false;
|
|
export const enableServerContext = true;
|
|
|
|
// Internal only.
|
|
export const enableGetInspectorDataForInstanceInProduction = false;
|
|
|
|
// Profiler API accepts a function to be called when a nested update is scheduled.
|
|
// This callback accepts the component type (class instance or function) the update is scheduled for.
|
|
export const enableProfilerNestedUpdateScheduledHook = false;
|
|
|
|
export const consoleManagedByDevToolsDuringStrictMode = true;
|
|
|
|
// Modern <StrictMode /> behaviour aligns more with what components
|
|
// components will encounter in production, especially when used With <Offscreen />.
|
|
// TODO: clean up legacy <StrictMode /> once tests pass WWW.
|
|
export const useModernStrictMode = false;
|