mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Andrew Clark
12a1d140e3
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.
91 lines
3.8 KiB
JavaScript
91 lines
3.8 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
|
|
*/
|
|
|
|
import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
|
|
import typeof * as ExportsType from './ReactFeatureFlags.native-fb';
|
|
|
|
// NOTE: There are no flags, currently. Uncomment the stuff below if we add one.
|
|
// Re-export dynamic flags from the internal module. Intentionally using *
|
|
// because this import is compiled to a `require` call.
|
|
import * as dynamicFlags from 'ReactNativeInternalFeatureFlags';
|
|
|
|
// We destructure each value before re-exporting to avoid a dynamic look-up on
|
|
// the exports object every time a flag is read.
|
|
export const {enableUseRefAccessWarning} = dynamicFlags;
|
|
|
|
// The rest of the flags are static for better dead code elimination.
|
|
export const enableDebugTracing = false;
|
|
export const enableSchedulingProfiler = __PROFILE__;
|
|
export const enableProfilerTimer = __PROFILE__;
|
|
export const enableProfilerCommitHooks = __PROFILE__;
|
|
export const enableProfilerNestedUpdatePhase = __PROFILE__;
|
|
export const enableProfilerNestedUpdateScheduledHook = false;
|
|
export const enableUpdaterTracking = __PROFILE__;
|
|
export const enableCache = false;
|
|
export const enableLegacyCache = false;
|
|
export const enableCacheElement = true;
|
|
export const enableFetchInstrumentation = false;
|
|
export const enableSchedulerDebugging = false;
|
|
export const debugRenderPhaseSideEffectsForStrictMode = true;
|
|
export const disableJavaScriptURLs = false;
|
|
export const disableCommentsAsDOMContainers = true;
|
|
export const disableInputAttributeSyncing = false;
|
|
export const disableIEWorkarounds = true;
|
|
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
|
|
export const enableScopeAPI = false;
|
|
export const enableCreateEventHandleAPI = false;
|
|
export const enableSuspenseCallback = false;
|
|
export const disableLegacyContext = false;
|
|
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
|
|
export const revertRemovalOfSiblingPrerendering = false;
|
|
export const enableTrustedTypesIntegration = false;
|
|
export const disableTextareaChildren = false;
|
|
export const disableModulePatternComponents = false;
|
|
export const enableSuspenseAvoidThisFallback = false;
|
|
export const enableSuspenseAvoidThisFallbackFizz = false;
|
|
export const enableCPUSuspense = true;
|
|
export const enableUseHook = true;
|
|
export const enableUseMemoCacheHook = true;
|
|
export const enableUseEffectEventHook = false;
|
|
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay =
|
|
true;
|
|
export const enableClientRenderFallbackOnTextMismatch = true;
|
|
export const enableComponentStackLocations = false;
|
|
export const enableLegacyFBSupport = false;
|
|
export const enableFilterEmptyStringAttributesDOM = false;
|
|
export const disableNativeComponentFrames = false;
|
|
export const skipUnmountedBoundaries = false;
|
|
export const enableGetInspectorDataForInstanceInProduction = true;
|
|
export const deferRenderPhaseUpdateToNextBatch = false;
|
|
|
|
export const createRootStrictEffectsByDefault = false;
|
|
|
|
export const disableSchedulerTimeoutInWorkLoop = false;
|
|
export const enableLazyContextPropagation = false;
|
|
export const enableLegacyHidden = true;
|
|
export const enableUnifiedSyncLane = false;
|
|
export const allowConcurrentByDefault = true;
|
|
export const enableCustomElementPropertySupport = false;
|
|
|
|
export const consoleManagedByDevToolsDuringStrictMode = false;
|
|
export const enableServerContext = true;
|
|
|
|
export const enableUseMutableSource = true;
|
|
|
|
export const enableTransitionTracing = false;
|
|
|
|
export const enableFloat = true;
|
|
export const enableHostSingletons = true;
|
|
|
|
export const useModernStrictMode = false;
|
|
export const enableFizzExternalRuntime = false;
|
|
|
|
// Flow magic to verify the exports of this file match the original version.
|
|
((((null: any): ExportsType): FeatureFlagsType): ExportsType);
|