amirho/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2026-02-22 03:42:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

[flags] Add enableParallelTransitions (#35392)

Browse Source 
## Overview

Adds a feature flag `enableParallelTransitions` to experiment with
engantling transitions less often.

## Motivation

Currently we over-entangle transition lanes. 

It's a common misunderstanding that React entangles all transitions,
always. We actually will complete transitions independently in many
cases. For example, [this
codepen](https://codepen.io/GabbeV/pen/pvyKBrM) from
[@gabbev](https://bsky.app/profile/gabbev.bsky.social/post/3m6uq2abihk2x)
shows transitions completing independently.

However, in many cases we entangle when we don't need to, instead of
letting the independent transitons complete independently. We still want
to entangle for updates that happen on the same queue.

## Example

As an example of what this flag would change, consider two independent
counter components:

```js
function Counter({ label }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <span>{use(readCache(`${label} ${count}`))} </span>
      <Button
        action={() => {
          setCount((c) => c + 1);
        }}
      >
        Next {label}
      </Button>
    </div>
  );
}
```
```js
export default function App() {
  return (
    <>
      <Counter label="A" />
      <Counter label="B" />
    </>
  );
}
```

### Before
The behavior today is to entange them, meaning they always commit
together:



https://github.com/user-attachments/assets/adead60e-8a98-4a20-a440-1efdf85b2142

### After

In this experiment, they will complete independently (if they don't
depend on each other):


https://github.com/user-attachments/assets/181632b5-3c92-4a29-a571-3637f3fab8cd

## Early Research

This change is in early research, and is not in the experimental
channel. We're going to experiment with this at Meta to understand how
much of a breaking change, and how beneficial it is before commiting to
shipping it in experimental and beyond.
This commit is contained in:
Ricky
2026-02-04 13:58:34 -05:00
committed by GitHub
parent cf993fb457
commit 6913ea4d28
12 changed files with 517 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react-reconciler/src/ReactFiberLane.js vendored
View File

@@ -29,6 +29,7 @@ import {
disableLegacyMode,
enableDefaultTransitionIndicator,
enableGestureTransition,
enableParallelTransitions,
} from 'shared/ReactFeatureFlags';
import {isDevToolsPresent} from './ReactFiberDevToolsHook';
import {clz32} from './clz32';
@@ -208,6 +209,9 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
case TransitionLane8:
case TransitionLane9:
case TransitionLane10:
if (enableParallelTransitions) {
return getHighestPriorityLane(lanes);
}
return lanes & TransitionUpdateLanes;
case TransitionLane11:
case TransitionLane12:

6
packages/react-reconciler/src/ReactFiberWorkLoop.js vendored
View File

@@ -58,6 +58,7 @@ import {
enableViewTransition,
enableGestureTransition,
enableDefaultTransitionIndicator,
enableParallelTransitions,
} from 'shared/ReactFeatureFlags';
import {resetOwnerStackLimit} from 'shared/ReactOwnerStackReset';
import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -1777,6 +1778,11 @@ function markRootSuspended(
spawnedLane: Lane,
didAttemptEntireTree: boolean,
) {
if (enableParallelTransitions) {
// When suspending, we should always mark the entangled lanes as suspended.
suspendedLanes = getEntangledLanes(root, suspendedLanes);
}
// When suspending, we should always exclude lanes that were pinged or (more
// rarely, since we try to avoid it) updated during the render phase.
suspendedLanes = removeLanes(suspendedLanes, workInProgressRootPingedLanes);

193
packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js vendored
View File

@@ -420,9 +420,13 @@ describe('ReactDeferredValue', () => {
// The initial value suspended, so we attempt the final value, which
// also suspends.
'Suspend! [Final]',
// pre-warming
'Suspend! [Loading...]',
'Suspend! [Final]',
...(gate('enableParallelTransitions')
? []
: [
// Existing bug: Unnecessary pre-warm.
'Suspend! [Loading...]',
'Suspend! [Final]',
]),
]);
expect(root).toMatchRenderedOutput(null);
@@ -439,6 +443,171 @@ describe('ReactDeferredValue', () => {
},
);
it(
'if a suspended render spawns a deferred task that suspends on a sibling, ' +
'we can finish the original task if the original sibling loads first',
async () => {
function App() {
const deferredText = useDeferredValue(`Final`, `Loading...`);
return (
<>
<AsyncText text={deferredText} />{' '}
<AsyncText text={`Sibling: ${deferredText}`} />
</>
);
}
const root = ReactNoop.createRoot();
await act(() => root.render(<App text="a" />));
assertLog([
'Suspend! [Loading...]',
// The initial value suspended, so we attempt the final value, which
// also suspends.
'Suspend! [Final]',
'Suspend! [Sibling: Final]',
...(gate('enableParallelTransitions')
? [
// With parallel transitions,
// we do not continue pre-warming.
]
: [
'Suspend! [Loading...]',
'Suspend! [Sibling: Loading...]',
'Suspend! [Final]',
'Suspend! [Sibling: Final]',
]),
]);
expect(root).toMatchRenderedOutput(null);
// The final value loads, so we can skip the initial value entirely.
await act(() => {
resolveText('Final');
});
assertLog(['Final', 'Suspend! [Sibling: Final]']);
expect(root).toMatchRenderedOutput(null);
// The initial value resolves first, so we render that.
await act(() => resolveText('Loading...'));
assertLog([
'Loading...',
'Suspend! [Sibling: Loading...]',
'Final',
'Suspend! [Sibling: Final]',
...(gate('enableParallelTransitions')
? [
// With parallel transitions,
// we do not continue pre-warming.
]
: [
'Loading...',
'Suspend! [Sibling: Loading...]',
'Final',
'Suspend! [Sibling: Final]',
]),
]);
expect(root).toMatchRenderedOutput(null);
// The Final sibling loads, we're unblocked and commit.
await act(() => {
resolveText('Sibling: Final');
});
assertLog(['Final', 'Sibling: Final']);
expect(root).toMatchRenderedOutput('Final Sibling: Final');
// We already rendered the Final value, so nothing happens
await act(() => {
resolveText('Sibling: Loading...');
});
assertLog([]);
expect(root).toMatchRenderedOutput('Final Sibling: Final');
},
);
it(
'if a suspended render spawns a deferred task that suspends on a sibling,' +
' we can switch to the deferred task without finishing the original one',
async () => {
function App() {
const deferredText = useDeferredValue(`Final`, `Loading...`);
return (
<>
<AsyncText text={deferredText} />{' '}
<AsyncText text={`Sibling: ${deferredText}`} />
</>
);
}
const root = ReactNoop.createRoot();
await act(() => root.render(<App text="a" />));
assertLog([
'Suspend! [Loading...]',
// The initial value suspended, so we attempt the final value, which
// also suspends.
'Suspend! [Final]',
'Suspend! [Sibling: Final]',
...(gate('enableParallelTransitions')
? [
// With parallel transitions,
// we do not continue pre-warming.
]
: [
'Suspend! [Loading...]',
'Suspend! [Sibling: Loading...]',
'Suspend! [Final]',
'Suspend! [Sibling: Final]',
]),
]);
expect(root).toMatchRenderedOutput(null);
// The final value loads, so we can skip the initial value entirely.
await act(() => {
resolveText('Final');
});
assertLog(['Final', 'Suspend! [Sibling: Final]']);
expect(root).toMatchRenderedOutput(null);
// The initial value resolves first, so we render that.
await act(() => resolveText('Loading...'));
assertLog([
'Loading...',
'Suspend! [Sibling: Loading...]',
'Final',
'Suspend! [Sibling: Final]',
...(gate('enableParallelTransitions')
? [
// With parallel transitions,
// we do not continue pre-warming.
]
: [
'Loading...',
'Suspend! [Sibling: Loading...]',
'Final',
'Suspend! [Sibling: Final]',
]),
]);
expect(root).toMatchRenderedOutput(null);
// The initial sibling loads, we're unblocked and commit.
await act(() => {
resolveText('Sibling: Loading...');
});
assertLog([
'Loading...',
'Sibling: Loading...',
'Final',
'Suspend! [Sibling: Final]',
]);
expect(root).toMatchRenderedOutput('Loading... Sibling: Loading...');
// Now unblock the final sibling.
await act(() => {
resolveText('Sibling: Final');
});
assertLog(['Final', 'Sibling: Final']);
expect(root).toMatchRenderedOutput('Final Sibling: Final');
},
);
it(
'if a suspended render spawns a deferred task, we can switch to the ' +
'deferred task without finishing the original one (no Suspense boundary, ' +
@@ -462,9 +631,12 @@ describe('ReactDeferredValue', () => {
// The initial value suspended, so we attempt the final value, which
// also suspends.
'Suspend! [Final]',
// pre-warming
'Suspend! [Loading...]',
'Suspend! [Final]',
...(gate('enableParallelTransitions')
? [
// With parallel transitions,
// we do not continue pre-warming.
]
: ['Suspend! [Loading...]', 'Suspend! [Final]']),
]);
expect(root).toMatchRenderedOutput(null);
@@ -539,9 +711,12 @@ describe('ReactDeferredValue', () => {
// The initial value suspended, so we attempt the final value, which
// also suspends.
'Suspend! [Final]',
// pre-warming
'Suspend! [Loading...]',
'Suspend! [Final]',
...(gate('enableParallelTransitions')
? [
// With parallel transitions,
// we do not continue pre-warming.
]
: ['Suspend! [Loading...]', 'Suspend! [Final]']),
]);
expect(root).toMatchRenderedOutput(null);

313
packages/react-reconciler/src/__tests__/ReactTransition-test.js vendored
View File

@@ -209,6 +209,319 @@ describe('ReactTransition', () => {
expect(root).toMatchRenderedOutput('Async');
});
// @gate enableLegacyCache
it('when multiple transitions update different queues, they entangle', async () => {
let setA;
let startTransitionA;
let setB;
let startTransitionB;
function A() {
const [a, _setA] = useState(0);
const [isPending, _startTransitionA] = useTransition();
setA = _setA;
startTransitionA = _startTransitionA;
return (
<span>
{isPending && (
<span>
<Text text="Pending A..." />
</span>
)}
<AsyncText text={`A: ${a}`} />
</span>
);
}
function B() {
const [b, _setB] = useState(0);
const [isPending, _startTransitionB] = useTransition();
setB = _setB;
startTransitionB = _startTransitionB;
return (
<span>
{isPending && (
<span>
<Text text="Pending B..." />
</span>
)}
<AsyncText text={`B: ${b}`} />
</span>
);
}
function App() {
return (
<>
<Suspense fallback={<span>Loading A</span>}>
<A />
</Suspense>
<Suspense fallback={<span>Loading B</span>}>
<B />
</Suspense>
</>
);
}
// Initial render
const root = ReactNoop.createRoot();
await act(() => {
root.render(<App />);
});
assertLog([
'Suspend! [A: 0]',
'Suspend! [B: 0]',
'Suspend! [A: 0]',
'Suspend! [B: 0]',
]);
expect(root).toMatchRenderedOutput(
<>
<span>Loading A</span>
<span>Loading B</span>
</>,
);
// Resolve
await act(() => {
resolveText('A: 0');
resolveText('B: 0');
});
assertLog(['A: 0', 'B: 0']);
expect(root).toMatchRenderedOutput(
<>
<span>A: 0</span>
<span>B: 0</span>
</>,
);
// Start transitioning A
await act(() => {
startTransitionA(() => {
setA(1);
});
});
assertLog(['Pending A...', 'A: 0', 'Suspend! [A: 1]']);
expect(root).toMatchRenderedOutput(
<>
<span>
<span>Pending A...</span>A: 0
</span>
<span>B: 0</span>
</>,
);
// Start transitioning B
await act(() => {
startTransitionB(() => {
setB(1);
});
});
assertLog(['Pending B...', 'B: 0', 'Suspend! [A: 1]', 'Suspend! [B: 1]']);
expect(root).toMatchRenderedOutput(
<>
<span>
<span>Pending A...</span>A: 0
</span>
<span>
<span>Pending B...</span>B: 0
</span>
</>,
);
// Resolve B
await act(() => {
resolveText('B: 1');
});
assertLog(
gate('enableParallelTransitions')
? ['B: 1', 'Suspend! [A: 1]']
: ['Suspend! [A: 1]', 'B: 1'],
);
expect(root).toMatchRenderedOutput(
gate('enableParallelTransitions') ? (
<>
<span>
<span>Pending A...</span>A: 0
</span>
<span>B: 1</span>
</>
) : (
<>
<span>
<span>Pending A...</span>A: 0
</span>
<span>
<span>Pending B...</span>B: 0
</span>
</>
),
);
// Resolve A
await act(() => {
resolveText('A: 1');
});
assertLog(gate('enableParallelTransitions') ? ['A: 1'] : ['A: 1', 'B: 1']);
expect(root).toMatchRenderedOutput(
<>
<span>A: 1</span>
<span>B: 1</span>
</>,
);
});
// @gate enableLegacyCache
it('when multiple transitions update different queues, but suspend the same boundary, they do entangle', async () => {
let setA;
let startTransitionA;
let setB;
let startTransitionB;
function A() {
const [a, _setA] = useState(0);
const [isPending, _startTransitionA] = useTransition();
setA = _setA;
startTransitionA = _startTransitionA;
return (
<span>
{isPending && (
<span>
<Text text="Pending A..." />
</span>
)}
<AsyncText text={`A: ${a}`} />
</span>
);
}
function B() {
const [b, _setB] = useState(0);
const [isPending, _startTransitionB] = useTransition();
setB = _setB;
startTransitionB = _startTransitionB;
return (
<span>
{isPending && (
<span>
<Text text="Pending B..." />
</span>
)}
<AsyncText text={`B: ${b}`} />
</span>
);
}
function App() {
return (
<Suspense fallback={<span>Loading...</span>}>
<A />
<B />
</Suspense>
);
}
// Initial render
const root = ReactNoop.createRoot();
await act(() => {
root.render(<App />);
});
assertLog([
'Suspend! [A: 0]',
// pre-warming
'Suspend! [A: 0]',
'Suspend! [B: 0]',
]);
expect(root).toMatchRenderedOutput(<span>Loading...</span>);
// Resolve
await act(() => {
resolveText('A: 0');
resolveText('B: 0');
});
assertLog(['A: 0', 'B: 0']);
expect(root).toMatchRenderedOutput(
<>
<span>A: 0</span>
<span>B: 0</span>
</>,
);
// Start transitioning A
await act(() => {
startTransitionA(() => {
setA(1);
});
});
assertLog(['Pending A...', 'A: 0', 'Suspend! [A: 1]']);
expect(root).toMatchRenderedOutput(
<>
<span>
<span>Pending A...</span>A: 0
</span>
<span>B: 0</span>
</>,
);
// Start transitioning B
await act(() => {
startTransitionB(() => {
setB(1);
});
});
assertLog(['Pending B...', 'B: 0', 'Suspend! [A: 1]', 'Suspend! [B: 1]']);
expect(root).toMatchRenderedOutput(
<>
<span>
<span>Pending A...</span>A: 0
</span>
<span>
<span>Pending B...</span>B: 0
</span>
</>,
);
// Resolve B
await act(() => {
resolveText('B: 1');
});
assertLog(
gate('enableParallelTransitions')
? ['B: 1', 'Suspend! [A: 1]']
: ['Suspend! [A: 1]', 'B: 1'],
);
expect(root).toMatchRenderedOutput(
gate('enableParallelTransitions') ? (
<>
<span>
<span>Pending A...</span>A: 0
</span>
<span>B: 1</span>
</>
) : (
<>
<span>
<span>Pending A...</span>A: 0
</span>
<span>
<span>Pending B...</span>B: 0
</span>
</>
),
);
// Resolve A
await act(() => {
resolveText('A: 1');
});
assertLog(gate('enableParallelTransitions') ? ['A: 1'] : ['A: 1', 'B: 1']);
expect(root).toMatchRenderedOutput(
<>
<span>A: 1</span>
<span>B: 1</span>
</>,
);
});
// @gate enableLegacyCache
it(
'when multiple transitions update the same queue, only the most recent ' +

3
packages/shared/ReactFeatureFlags.js
View File

@@ -215,6 +215,9 @@ export const disableInputAttributeSyncing: boolean = false;
// Disables children for <textarea> elements
export const disableTextareaChildren: boolean = false;
// Disables children for <textarea> elements
export const enableParallelTransitions: boolean = true;
// -----------------------------------------------------------------------------
// Debugging and DevTools
// -----------------------------------------------------------------------------

1
packages/shared/forks/ReactFeatureFlags.native-fb.js
View File

@@ -83,6 +83,7 @@ export const enablePerformanceIssueReporting: boolean =
enableComponentPerformanceTrack;
export const enableInternalInstanceMap: boolean = false;
export const enableOptimisticKey: boolean = false;
export const enableParallelTransitions: boolean = false;
// Flow magic to verify the exports of this file match the original version.
((((null: any): ExportsType): FeatureFlagsType): ExportsType);

1
packages/shared/forks/ReactFeatureFlags.native-oss.js
View File

@@ -83,6 +83,7 @@ export const enableProfilerTimer: boolean = __PROFILE__;
export const enableProfilerCommitHooks: boolean = __PROFILE__;
export const enableProfilerNestedUpdatePhase: boolean = __PROFILE__;
export const enableUpdaterTracking: boolean = __PROFILE__;
export const enableParallelTransitions: boolean = false;
// Flow magic to verify the exports of this file match the original version.
((((null: any): ExportsType): FeatureFlagsType): ExportsType);

1
packages/shared/forks/ReactFeatureFlags.test-renderer.js
View File

@@ -92,6 +92,7 @@ export const enableReactTestRendererWarning: boolean = true;
export const enableObjectFiber: boolean = false;
export const enableOptimisticKey: boolean = false;
export const enableParallelTransitions: boolean = false;
// Flow magic to verify the exports of this file match the original version.
((((null: any): ExportsType): FeatureFlagsType): ExportsType);

1
packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
View File

@@ -69,6 +69,7 @@ export const enableFragmentRefsInstanceHandles = false;
export const enableFragmentRefsTextNodes = false;
export const ownerStackLimit = 1e4;
export const enableOptimisticKey = false;
export const enableParallelTransitions = false;
// Flow magic to verify the exports of this file match the original version.
((((null: any): ExportsType): FeatureFlagsType): ExportsType);

1
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
View File

@@ -84,6 +84,7 @@ export const ownerStackLimit = 1e4;
export const enableInternalInstanceMap: boolean = false;
export const enableOptimisticKey: boolean = false;
export const enableParallelTransitions: boolean = false;
// Flow magic to verify the exports of this file match the original version.
((((null: any): ExportsType): FeatureFlagsType): ExportsType);

1
packages/shared/forks/ReactFeatureFlags.www-dynamic.js
View File

@@ -37,6 +37,7 @@ export const enableFragmentRefsScrollIntoView: boolean = __VARIANT__;
export const enableFragmentRefsTextNodes: boolean = __VARIANT__;
export const enableInternalInstanceMap: boolean = __VARIANT__;
export const enableTrustedTypesIntegration: boolean = __VARIANT__;
export const enableParallelTransitions: boolean = __VARIANT__;
// TODO: These flags are hard-coded to the default values used in open source.
// Update the tests so that they pass in either mode, then set these

1
packages/shared/forks/ReactFeatureFlags.www.js
View File

@@ -34,6 +34,7 @@ export const {
enableFragmentRefsScrollIntoView,
enableFragmentRefsTextNodes,
enableInternalInstanceMap,
enableParallelTransitions,
} = dynamicFeatureFlags;
// On WWW, __EXPERIMENTAL__ is used for a new modern build.