Add moveBefore Experiment - #31596

Merged
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore
Nov 22, 2024
Merged

Add moveBefore Experiment#31596
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore

Conversation

@sebmarkbage

@sebmarkbagesebmarkbage commented Nov 20, 2024

Copy link
Copy Markdown
Contributor

A long standing issue for React has been that if you reorder stateful nodes, they may lose their state and reload. The thing moving loses its state. There's no way to solve this in general where two stateful nodes swap.

The moveBefore() proposal has now moved to intent-to-ship. This function is kind of like insertBefore but preserves state.

There's a demo here. Ideally we'd port this demo to a fixture so we can try it.

Currently this flag is always off - even in experimental. That's because this is still behind a Chrome flag so it's a little early to turn it on even in experimental. So you need a custom build. It's on in RN but only because it doesn't apply there which makes it easier to tell that it's safe to ship once it's on everywhere else.

The other reason it's still off is because there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected. That happens if we're inside a completely disconnected React root. That's not usually how you should use React because it means effects can't read layout etc. However, it is currently supported. To handle this we'd have to try/catch the moveBefore to handle this case but we hope this semantic will change before it ships. Before we turn this on in experimental we either have to wait for the implementation to not error in the disconnected-disconnected case in Chrome or we'd have to add try/catch.

@vercel

vercelBot commented Nov 20, 2024

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
react-compiler-playground✅ Ready (Inspect)Visit Preview💬 Add feedbackNov 22, 2024 5:56pm

@react-sizebot

react-sizebot commented Nov 20, 2024

Copy link
Copy Markdown

Comparing: e697386c10d837017de9516b9252b717fbb60924...39acaa7eea0def3ecc12f6b82201734eaa90c009

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name+/-BaseCurrent+/- gzipBase gzipCurrent gzip
oss-stable/react-dom/cjs/react-dom.production.js=6.68 kB6.68 kB=1.83 kB1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js=509.94 kB509.94 kB=91.24 kB91.24 kB
oss-experimental/react-dom/cjs/react-dom.production.js=6.69 kB6.69 kB=1.83 kB1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js=514.88 kB514.88 kB=91.95 kB91.95 kB
facebook-www/ReactDOM-prod.classic.js=594.80 kB594.80 kB=104.96 kB104.96 kB
facebook-www/ReactDOM-prod.modern.js=585.07 kB585.07 kB=103.39 kB103.39 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 48ff9b8

@sebmarkbage
sebmarkbage merged commit aba370f into react:mainNov 22, 2024
github-actionsBot pushed a commit that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](aba370f)
github-actionsBot pushed a commit to code/lib-react that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](react@aba370f)
@slorber

Copy link
Copy Markdown
Contributor

there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected

Apparently that does not throw

whatwg/dom#1255 (comment)

Yea, you can move between disconnected parents. It would only throw when you can't move without side-effects - as in, across documents or when the move would connect/disconnect the element.

cipolleschi added a commit to cipolleschi/metro that referenced this pull request Dec 11, 2024
Summary:
X-link: react/react-native#48196
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
facebook-github-bot pushed a commit to react/metro that referenced this pull request Dec 16, 2024
Summary:
X-link: react/react-native#48196
Pull Request resolved: #1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Dec 16, 2024
Summary:
Pull Request resolved: #48196
X-link: react/metro#1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedReact Core TeamOpened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@sebmarkbage@react-sizebot@slorber@sophiebits@josephsavona@facebook-github-bot
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Add moveBefore Experiment - #31596

Merged
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore
Nov 22, 2024
Merged

Add moveBefore Experiment#31596
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore

Conversation

@sebmarkbage

@sebmarkbagesebmarkbage commented Nov 20, 2024

Copy link
Copy Markdown
Contributor

A long standing issue for React has been that if you reorder stateful nodes, they may lose their state and reload. The thing moving loses its state. There's no way to solve this in general where two stateful nodes swap.

The moveBefore() proposal has now moved to intent-to-ship. This function is kind of like insertBefore but preserves state.

There's a demo here. Ideally we'd port this demo to a fixture so we can try it.

Currently this flag is always off - even in experimental. That's because this is still behind a Chrome flag so it's a little early to turn it on even in experimental. So you need a custom build. It's on in RN but only because it doesn't apply there which makes it easier to tell that it's safe to ship once it's on everywhere else.

The other reason it's still off is because there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected. That happens if we're inside a completely disconnected React root. That's not usually how you should use React because it means effects can't read layout etc. However, it is currently supported. To handle this we'd have to try/catch the moveBefore to handle this case but we hope this semantic will change before it ships. Before we turn this on in experimental we either have to wait for the implementation to not error in the disconnected-disconnected case in Chrome or we'd have to add try/catch.

@vercel

vercelBot commented Nov 20, 2024

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
react-compiler-playground✅ Ready (Inspect)Visit Preview💬 Add feedbackNov 22, 2024 5:56pm

@react-sizebot

react-sizebot commented Nov 20, 2024

Copy link
Copy Markdown

Comparing: e697386c10d837017de9516b9252b717fbb60924...39acaa7eea0def3ecc12f6b82201734eaa90c009

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name+/-BaseCurrent+/- gzipBase gzipCurrent gzip
oss-stable/react-dom/cjs/react-dom.production.js=6.68 kB6.68 kB=1.83 kB1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js=509.94 kB509.94 kB=91.24 kB91.24 kB
oss-experimental/react-dom/cjs/react-dom.production.js=6.69 kB6.69 kB=1.83 kB1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js=514.88 kB514.88 kB=91.95 kB91.95 kB
facebook-www/ReactDOM-prod.classic.js=594.80 kB594.80 kB=104.96 kB104.96 kB
facebook-www/ReactDOM-prod.modern.js=585.07 kB585.07 kB=103.39 kB103.39 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 48ff9b8

@sebmarkbage
sebmarkbage merged commit aba370f into react:mainNov 22, 2024
github-actionsBot pushed a commit that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](aba370f)
github-actionsBot pushed a commit to code/lib-react that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](react@aba370f)
@slorber

Copy link
Copy Markdown
Contributor

there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected

Apparently that does not throw

whatwg/dom#1255 (comment)

Yea, you can move between disconnected parents. It would only throw when you can't move without side-effects - as in, across documents or when the move would connect/disconnect the element.

cipolleschi added a commit to cipolleschi/metro that referenced this pull request Dec 11, 2024
Summary:
X-link: react/react-native#48196
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
facebook-github-bot pushed a commit to react/metro that referenced this pull request Dec 16, 2024
Summary:
X-link: react/react-native#48196
Pull Request resolved: #1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Dec 16, 2024
Summary:
Pull Request resolved: #48196
X-link: react/metro#1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedReact Core TeamOpened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@sebmarkbage@react-sizebot@slorber@sophiebits@josephsavona@facebook-github-bot
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add moveBefore Experiment - #31596

Merged
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore
Nov 22, 2024
Merged

Add moveBefore Experiment#31596
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore

Conversation

@sebmarkbage

@sebmarkbagesebmarkbage commented Nov 20, 2024

Copy link
Copy Markdown
Contributor

A long standing issue for React has been that if you reorder stateful nodes, they may lose their state and reload. The thing moving loses its state. There's no way to solve this in general where two stateful nodes swap.

The moveBefore() proposal has now moved to intent-to-ship. This function is kind of like insertBefore but preserves state.

There's a demo here. Ideally we'd port this demo to a fixture so we can try it.

Currently this flag is always off - even in experimental. That's because this is still behind a Chrome flag so it's a little early to turn it on even in experimental. So you need a custom build. It's on in RN but only because it doesn't apply there which makes it easier to tell that it's safe to ship once it's on everywhere else.

The other reason it's still off is because there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected. That happens if we're inside a completely disconnected React root. That's not usually how you should use React because it means effects can't read layout etc. However, it is currently supported. To handle this we'd have to try/catch the moveBefore to handle this case but we hope this semantic will change before it ships. Before we turn this on in experimental we either have to wait for the implementation to not error in the disconnected-disconnected case in Chrome or we'd have to add try/catch.

@vercel

vercelBot commented Nov 20, 2024

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
react-compiler-playground✅ Ready (Inspect)Visit Preview💬 Add feedbackNov 22, 2024 5:56pm

@react-sizebot

react-sizebot commented Nov 20, 2024

Copy link
Copy Markdown

Comparing: e697386c10d837017de9516b9252b717fbb60924...39acaa7eea0def3ecc12f6b82201734eaa90c009

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name+/-BaseCurrent+/- gzipBase gzipCurrent gzip
oss-stable/react-dom/cjs/react-dom.production.js=6.68 kB6.68 kB=1.83 kB1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js=509.94 kB509.94 kB=91.24 kB91.24 kB
oss-experimental/react-dom/cjs/react-dom.production.js=6.69 kB6.69 kB=1.83 kB1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js=514.88 kB514.88 kB=91.95 kB91.95 kB
facebook-www/ReactDOM-prod.classic.js=594.80 kB594.80 kB=104.96 kB104.96 kB
facebook-www/ReactDOM-prod.modern.js=585.07 kB585.07 kB=103.39 kB103.39 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 48ff9b8

@sebmarkbage
sebmarkbage merged commit aba370f into react:mainNov 22, 2024
github-actionsBot pushed a commit that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](aba370f)
github-actionsBot pushed a commit to code/lib-react that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](react@aba370f)
@slorber

Copy link
Copy Markdown
Contributor

there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected

Apparently that does not throw

whatwg/dom#1255 (comment)

Yea, you can move between disconnected parents. It would only throw when you can't move without side-effects - as in, across documents or when the move would connect/disconnect the element.

cipolleschi added a commit to cipolleschi/metro that referenced this pull request Dec 11, 2024
Summary:
X-link: react/react-native#48196
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
facebook-github-bot pushed a commit to react/metro that referenced this pull request Dec 16, 2024
Summary:
X-link: react/react-native#48196
Pull Request resolved: #1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Dec 16, 2024
Summary:
Pull Request resolved: #48196
X-link: react/metro#1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedReact Core TeamOpened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@sebmarkbage@react-sizebot@slorber@sophiebits@josephsavona@facebook-github-bot
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add moveBefore Experiment - #31596

Merged
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore
Nov 22, 2024
Merged

Add moveBefore Experiment#31596
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore

Conversation

@sebmarkbage

@sebmarkbagesebmarkbage commented Nov 20, 2024

Copy link
Copy Markdown
Contributor

A long standing issue for React has been that if you reorder stateful nodes, they may lose their state and reload. The thing moving loses its state. There's no way to solve this in general where two stateful nodes swap.

The moveBefore() proposal has now moved to intent-to-ship. This function is kind of like insertBefore but preserves state.

There's a demo here. Ideally we'd port this demo to a fixture so we can try it.

Currently this flag is always off - even in experimental. That's because this is still behind a Chrome flag so it's a little early to turn it on even in experimental. So you need a custom build. It's on in RN but only because it doesn't apply there which makes it easier to tell that it's safe to ship once it's on everywhere else.

The other reason it's still off is because there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected. That happens if we're inside a completely disconnected React root. That's not usually how you should use React because it means effects can't read layout etc. However, it is currently supported. To handle this we'd have to try/catch the moveBefore to handle this case but we hope this semantic will change before it ships. Before we turn this on in experimental we either have to wait for the implementation to not error in the disconnected-disconnected case in Chrome or we'd have to add try/catch.

@vercel

vercelBot commented Nov 20, 2024

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
react-compiler-playground✅ Ready (Inspect)Visit Preview💬 Add feedbackNov 22, 2024 5:56pm

@react-sizebot

react-sizebot commented Nov 20, 2024

Copy link
Copy Markdown

Comparing: e697386c10d837017de9516b9252b717fbb60924...39acaa7eea0def3ecc12f6b82201734eaa90c009

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name+/-BaseCurrent+/- gzipBase gzipCurrent gzip
oss-stable/react-dom/cjs/react-dom.production.js=6.68 kB6.68 kB=1.83 kB1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js=509.94 kB509.94 kB=91.24 kB91.24 kB
oss-experimental/react-dom/cjs/react-dom.production.js=6.69 kB6.69 kB=1.83 kB1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js=514.88 kB514.88 kB=91.95 kB91.95 kB
facebook-www/ReactDOM-prod.classic.js=594.80 kB594.80 kB=104.96 kB104.96 kB
facebook-www/ReactDOM-prod.modern.js=585.07 kB585.07 kB=103.39 kB103.39 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 48ff9b8

@sebmarkbage
sebmarkbage merged commit aba370f into react:mainNov 22, 2024
github-actionsBot pushed a commit that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](aba370f)
github-actionsBot pushed a commit to code/lib-react that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](react@aba370f)
@slorber

Copy link
Copy Markdown
Contributor

there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected

Apparently that does not throw

whatwg/dom#1255 (comment)

Yea, you can move between disconnected parents. It would only throw when you can't move without side-effects - as in, across documents or when the move would connect/disconnect the element.

cipolleschi added a commit to cipolleschi/metro that referenced this pull request Dec 11, 2024
Summary:
X-link: react/react-native#48196
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
facebook-github-bot pushed a commit to react/metro that referenced this pull request Dec 16, 2024
Summary:
X-link: react/react-native#48196
Pull Request resolved: #1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Dec 16, 2024
Summary:
Pull Request resolved: #48196
X-link: react/metro#1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedReact Core TeamOpened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@sebmarkbage@react-sizebot@slorber@sophiebits@josephsavona@facebook-github-bot
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Add moveBefore Experiment - #31596

Merged
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore
Nov 22, 2024
Merged

Add moveBefore Experiment#31596
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore

Conversation

@sebmarkbage

@sebmarkbagesebmarkbage commented Nov 20, 2024

Copy link
Copy Markdown
Contributor

A long standing issue for React has been that if you reorder stateful nodes, they may lose their state and reload. The thing moving loses its state. There's no way to solve this in general where two stateful nodes swap.

The moveBefore() proposal has now moved to intent-to-ship. This function is kind of like insertBefore but preserves state.

There's a demo here. Ideally we'd port this demo to a fixture so we can try it.

Currently this flag is always off - even in experimental. That's because this is still behind a Chrome flag so it's a little early to turn it on even in experimental. So you need a custom build. It's on in RN but only because it doesn't apply there which makes it easier to tell that it's safe to ship once it's on everywhere else.

The other reason it's still off is because there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected. That happens if we're inside a completely disconnected React root. That's not usually how you should use React because it means effects can't read layout etc. However, it is currently supported. To handle this we'd have to try/catch the moveBefore to handle this case but we hope this semantic will change before it ships. Before we turn this on in experimental we either have to wait for the implementation to not error in the disconnected-disconnected case in Chrome or we'd have to add try/catch.

@vercel

vercelBot commented Nov 20, 2024

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
react-compiler-playground✅ Ready (Inspect)Visit Preview💬 Add feedbackNov 22, 2024 5:56pm

@react-sizebot

react-sizebot commented Nov 20, 2024

Copy link
Copy Markdown

Comparing: e697386c10d837017de9516b9252b717fbb60924...39acaa7eea0def3ecc12f6b82201734eaa90c009

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name+/-BaseCurrent+/- gzipBase gzipCurrent gzip
oss-stable/react-dom/cjs/react-dom.production.js=6.68 kB6.68 kB=1.83 kB1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js=509.94 kB509.94 kB=91.24 kB91.24 kB
oss-experimental/react-dom/cjs/react-dom.production.js=6.69 kB6.69 kB=1.83 kB1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js=514.88 kB514.88 kB=91.95 kB91.95 kB
facebook-www/ReactDOM-prod.classic.js=594.80 kB594.80 kB=104.96 kB104.96 kB
facebook-www/ReactDOM-prod.modern.js=585.07 kB585.07 kB=103.39 kB103.39 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 48ff9b8

@sebmarkbage
sebmarkbage merged commit aba370f into react:mainNov 22, 2024
github-actionsBot pushed a commit that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](aba370f)
github-actionsBot pushed a commit to code/lib-react that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](react@aba370f)
@slorber

Copy link
Copy Markdown
Contributor

there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected

Apparently that does not throw

whatwg/dom#1255 (comment)

Yea, you can move between disconnected parents. It would only throw when you can't move without side-effects - as in, across documents or when the move would connect/disconnect the element.

cipolleschi added a commit to cipolleschi/metro that referenced this pull request Dec 11, 2024
Summary:
X-link: react/react-native#48196
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
facebook-github-bot pushed a commit to react/metro that referenced this pull request Dec 16, 2024
Summary:
X-link: react/react-native#48196
Pull Request resolved: #1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Dec 16, 2024
Summary:
Pull Request resolved: #48196
X-link: react/metro#1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedReact Core TeamOpened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@sebmarkbage@react-sizebot@slorber@sophiebits@josephsavona@facebook-github-bot
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add moveBefore Experiment - #31596

Merged
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore
Nov 22, 2024
Merged

Add moveBefore Experiment#31596
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore

Conversation

@sebmarkbage

@sebmarkbagesebmarkbage commented Nov 20, 2024

Copy link
Copy Markdown
Contributor

A long standing issue for React has been that if you reorder stateful nodes, they may lose their state and reload. The thing moving loses its state. There's no way to solve this in general where two stateful nodes swap.

The moveBefore() proposal has now moved to intent-to-ship. This function is kind of like insertBefore but preserves state.

There's a demo here. Ideally we'd port this demo to a fixture so we can try it.

Currently this flag is always off - even in experimental. That's because this is still behind a Chrome flag so it's a little early to turn it on even in experimental. So you need a custom build. It's on in RN but only because it doesn't apply there which makes it easier to tell that it's safe to ship once it's on everywhere else.

The other reason it's still off is because there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected. That happens if we're inside a completely disconnected React root. That's not usually how you should use React because it means effects can't read layout etc. However, it is currently supported. To handle this we'd have to try/catch the moveBefore to handle this case but we hope this semantic will change before it ships. Before we turn this on in experimental we either have to wait for the implementation to not error in the disconnected-disconnected case in Chrome or we'd have to add try/catch.

@vercel

vercelBot commented Nov 20, 2024

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
react-compiler-playground✅ Ready (Inspect)Visit Preview💬 Add feedbackNov 22, 2024 5:56pm

@react-sizebot

react-sizebot commented Nov 20, 2024

Copy link
Copy Markdown

Comparing: e697386c10d837017de9516b9252b717fbb60924...39acaa7eea0def3ecc12f6b82201734eaa90c009

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name+/-BaseCurrent+/- gzipBase gzipCurrent gzip
oss-stable/react-dom/cjs/react-dom.production.js=6.68 kB6.68 kB=1.83 kB1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js=509.94 kB509.94 kB=91.24 kB91.24 kB
oss-experimental/react-dom/cjs/react-dom.production.js=6.69 kB6.69 kB=1.83 kB1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js=514.88 kB514.88 kB=91.95 kB91.95 kB
facebook-www/ReactDOM-prod.classic.js=594.80 kB594.80 kB=104.96 kB104.96 kB
facebook-www/ReactDOM-prod.modern.js=585.07 kB585.07 kB=103.39 kB103.39 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 48ff9b8

@sebmarkbage
sebmarkbage merged commit aba370f into react:mainNov 22, 2024
github-actionsBot pushed a commit that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](aba370f)
github-actionsBot pushed a commit to code/lib-react that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](react@aba370f)
@slorber

Copy link
Copy Markdown
Contributor

there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected

Apparently that does not throw

whatwg/dom#1255 (comment)

Yea, you can move between disconnected parents. It would only throw when you can't move without side-effects - as in, across documents or when the move would connect/disconnect the element.

cipolleschi added a commit to cipolleschi/metro that referenced this pull request Dec 11, 2024
Summary:
X-link: react/react-native#48196
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
facebook-github-bot pushed a commit to react/metro that referenced this pull request Dec 16, 2024
Summary:
X-link: react/react-native#48196
Pull Request resolved: #1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Dec 16, 2024
Summary:
Pull Request resolved: #48196
X-link: react/metro#1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedReact Core TeamOpened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@sebmarkbage@react-sizebot@slorber@sophiebits@josephsavona@facebook-github-bot
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add moveBefore Experiment - #31596

Merged
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore
Nov 22, 2024
Merged

Add moveBefore Experiment#31596
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore

Conversation

@sebmarkbage

@sebmarkbagesebmarkbage commented Nov 20, 2024

Copy link
Copy Markdown
Contributor

A long standing issue for React has been that if you reorder stateful nodes, they may lose their state and reload. The thing moving loses its state. There's no way to solve this in general where two stateful nodes swap.

The moveBefore() proposal has now moved to intent-to-ship. This function is kind of like insertBefore but preserves state.

There's a demo here. Ideally we'd port this demo to a fixture so we can try it.

Currently this flag is always off - even in experimental. That's because this is still behind a Chrome flag so it's a little early to turn it on even in experimental. So you need a custom build. It's on in RN but only because it doesn't apply there which makes it easier to tell that it's safe to ship once it's on everywhere else.

The other reason it's still off is because there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected. That happens if we're inside a completely disconnected React root. That's not usually how you should use React because it means effects can't read layout etc. However, it is currently supported. To handle this we'd have to try/catch the moveBefore to handle this case but we hope this semantic will change before it ships. Before we turn this on in experimental we either have to wait for the implementation to not error in the disconnected-disconnected case in Chrome or we'd have to add try/catch.

@vercel

vercelBot commented Nov 20, 2024

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
react-compiler-playground✅ Ready (Inspect)Visit Preview💬 Add feedbackNov 22, 2024 5:56pm

@react-sizebot

react-sizebot commented Nov 20, 2024

Copy link
Copy Markdown

Comparing: e697386c10d837017de9516b9252b717fbb60924...39acaa7eea0def3ecc12f6b82201734eaa90c009

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name+/-BaseCurrent+/- gzipBase gzipCurrent gzip
oss-stable/react-dom/cjs/react-dom.production.js=6.68 kB6.68 kB=1.83 kB1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js=509.94 kB509.94 kB=91.24 kB91.24 kB
oss-experimental/react-dom/cjs/react-dom.production.js=6.69 kB6.69 kB=1.83 kB1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js=514.88 kB514.88 kB=91.95 kB91.95 kB
facebook-www/ReactDOM-prod.classic.js=594.80 kB594.80 kB=104.96 kB104.96 kB
facebook-www/ReactDOM-prod.modern.js=585.07 kB585.07 kB=103.39 kB103.39 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 48ff9b8

@sebmarkbage
sebmarkbage merged commit aba370f into react:mainNov 22, 2024
github-actionsBot pushed a commit that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](aba370f)
github-actionsBot pushed a commit to code/lib-react that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](react@aba370f)
@slorber

Copy link
Copy Markdown
Contributor

there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected

Apparently that does not throw

whatwg/dom#1255 (comment)

Yea, you can move between disconnected parents. It would only throw when you can't move without side-effects - as in, across documents or when the move would connect/disconnect the element.

cipolleschi added a commit to cipolleschi/metro that referenced this pull request Dec 11, 2024
Summary:
X-link: react/react-native#48196
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
facebook-github-bot pushed a commit to react/metro that referenced this pull request Dec 16, 2024
Summary:
X-link: react/react-native#48196
Pull Request resolved: #1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Dec 16, 2024
Summary:
Pull Request resolved: #48196
X-link: react/metro#1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedReact Core TeamOpened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@sebmarkbage@react-sizebot@slorber@sophiebits@josephsavona@facebook-github-bot
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Add moveBefore Experiment - #31596

Merged
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore
Nov 22, 2024
Merged

Add moveBefore Experiment#31596
sebmarkbage merged 3 commits into
react:mainfrom
sebmarkbage:movebefore

Conversation

@sebmarkbage

@sebmarkbagesebmarkbage commented Nov 20, 2024

Copy link
Copy Markdown
Contributor

A long standing issue for React has been that if you reorder stateful nodes, they may lose their state and reload. The thing moving loses its state. There's no way to solve this in general where two stateful nodes swap.

The moveBefore() proposal has now moved to intent-to-ship. This function is kind of like insertBefore but preserves state.

There's a demo here. Ideally we'd port this demo to a fixture so we can try it.

Currently this flag is always off - even in experimental. That's because this is still behind a Chrome flag so it's a little early to turn it on even in experimental. So you need a custom build. It's on in RN but only because it doesn't apply there which makes it easier to tell that it's safe to ship once it's on everywhere else.

The other reason it's still off is because there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected. That happens if we're inside a completely disconnected React root. That's not usually how you should use React because it means effects can't read layout etc. However, it is currently supported. To handle this we'd have to try/catch the moveBefore to handle this case but we hope this semantic will change before it ships. Before we turn this on in experimental we either have to wait for the implementation to not error in the disconnected-disconnected case in Chrome or we'd have to add try/catch.

@vercel

vercelBot commented Nov 20, 2024

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
react-compiler-playground✅ Ready (Inspect)Visit Preview💬 Add feedbackNov 22, 2024 5:56pm

@react-sizebot

react-sizebot commented Nov 20, 2024

Copy link
Copy Markdown

Comparing: e697386c10d837017de9516b9252b717fbb60924...39acaa7eea0def3ecc12f6b82201734eaa90c009

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name+/-BaseCurrent+/- gzipBase gzipCurrent gzip
oss-stable/react-dom/cjs/react-dom.production.js=6.68 kB6.68 kB=1.83 kB1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js=509.94 kB509.94 kB=91.24 kB91.24 kB
oss-experimental/react-dom/cjs/react-dom.production.js=6.69 kB6.69 kB=1.83 kB1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js=514.88 kB514.88 kB=91.95 kB91.95 kB
facebook-www/ReactDOM-prod.classic.js=594.80 kB594.80 kB=104.96 kB104.96 kB
facebook-www/ReactDOM-prod.modern.js=585.07 kB585.07 kB=103.39 kB103.39 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 48ff9b8

@sebmarkbage
sebmarkbage merged commit aba370f into react:mainNov 22, 2024
github-actionsBot pushed a commit that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](aba370f)
github-actionsBot pushed a commit to code/lib-react that referenced this pull request Nov 22, 2024
A long standing issue for React has been that if you reorder stateful
nodes, they may lose their state and reload. The thing moving loses its
state. There's no way to solve this in general where two stateful nodes
swap.
The [`moveBefore()`
proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656)
has now moved to
[intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ).
This function is kind of like `insertBefore` but preserves state.
There's [a demo here](https://state-preserving-atomic-move.glitch.me/).
Ideally we'd port this demo to a fixture so we can try it.
Currently this flag is always off - even in experimental. That's because
this is still behind a Chrome flag so it's a little early to turn it on
even in experimental. So you need a custom build. It's on in RN but only
because it doesn't apply there which makes it easier to tell that it's
safe to ship once it's on everywhere else.
The other reason it's still off is because there's currently a semantic
breaking change. `moveBefore()` errors if both nodes are disconnected.
That happens if we're inside a completely disconnected React root.
That's not usually how you should use React because it means effects
can't read layout etc. However, it is currently supported. To handle
this we'd have to try/catch the `moveBefore` to handle this case but we
hope this semantic will change before it ships. Before we turn this on
in experimental we either have to wait for the implementation to not
error in the disconnected-disconnected case in Chrome or we'd have to
add try/catch.
DiffTrain build for [aba370f](react@aba370f)
@slorber

Copy link
Copy Markdown
Contributor

there's currently a semantic breaking change. moveBefore() errors if both nodes are disconnected

Apparently that does not throw

whatwg/dom#1255 (comment)

Yea, you can move between disconnected parents. It would only throw when you can't move without side-effects - as in, across documents or when the move would connect/disconnect the element.

cipolleschi added a commit to cipolleschi/metro that referenced this pull request Dec 11, 2024
Summary:
X-link: react/react-native#48196
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
facebook-github-bot pushed a commit to react/metro that referenced this pull request Dec 16, 2024
Summary:
X-link: react/react-native#48196
Pull Request resolved: #1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Dec 16, 2024
Summary:
Pull Request resolved: #48196
X-link: react/metro#1400
- **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>//
- **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>//
- **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>//
- **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>//
- **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>//
- **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>//
- **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>//
- **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>//
- **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>//
- **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>//
- **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>//
- **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>//
- **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>//
- **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>//
- **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>//
- **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>//
- **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>//
- **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>//
- **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>//
- **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>//
- **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>//
- **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>//
- **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>//
- **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>//
- **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>//
- **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>//
- **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>//
- **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>//
- **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>//
- **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>//
- **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>//
- **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>//
Changelog:
[General][Changed] - Bump React from 18.3.1 to 19.0.0
bypass-github-export-checks
jest_e2e[run_all_tests]
Reviewed By: cortinico
Differential Revision: D67018480
fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedReact Core TeamOpened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@sebmarkbage@react-sizebot@slorber@sophiebits@josephsavona@facebook-github-bot