dillon1000/react

Commit

[flags] Add `enableParallelTransitions` (#35392)

## 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.
Browse files
Changed paths12 files
First-parent comparison
M packages/react-reconciler/src/ReactFiberLane.js ModifiedM packages/react-reconciler/src/ReactFiberWorkLoop.js ModifiedM packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js ModifiedM packages/react-reconciler/src/__tests__/ReactTransition-test.js ModifiedM packages/shared/ReactFeatureFlags.js ModifiedM packages/shared/forks/ReactFeatureFlags.native-fb.js ModifiedM packages/shared/forks/ReactFeatureFlags.native-oss.js ModifiedM packages/shared/forks/ReactFeatureFlags.test-renderer.js ModifiedM packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js ModifiedM packages/shared/forks/ReactFeatureFlags.test-renderer.www.js ModifiedM packages/shared/forks/ReactFeatureFlags.www-dynamic.js ModifiedM packages/shared/forks/ReactFeatureFlags.www.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…