Skip to content

Commit a4eb2df

Browse files
authored
Release Fragment refs to Canary (#34720)
## Overview This PR adds the `ref` prop to `<Fragment>` in `react@canary`. This means this API is ready for final feedback and prepared for a semver stable release. ## What this means Shipping Fragment refs to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like Fragment refs with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like Fragment refs. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like Fragment refs as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#fragment-refs) blog post, and [the new docs for Fragment refs`](https://react.dev/reference/react/Fragment#fragmentinstance) for more info.
1 parent 6a8c7fb commit a4eb2df

7 files changed

Lines changed: 22 additions & 22 deletions

File tree

‎fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ export default function ScrollIntoViewCase() {
5555
constscrollContainerRef=useRef(null);
5656

5757
constscrollVertical=()=>{
58-
fragmentRef.current.experimental_scrollIntoView(alignToTop);
58+
fragmentRef.current.scrollIntoView(alignToTop);
5959
};
6060

6161
constscrollVerticalNoChildren=()=>{
62-
noChildRef.current.experimental_scrollIntoView(alignToTop);
62+
noChildRef.current.scrollIntoView(alignToTop);
6363
};
6464

6565
useEffect(()=>{

‎packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3341,13 +3341,13 @@ function validateDocumentPositionWithFiberTree(
33413341

33423342
if(enableFragmentRefsScrollIntoView){
33433343
// $FlowFixMe[prop-missing]
3344-
FragmentInstance.prototype.experimental_scrollIntoView=function(
3344+
FragmentInstance.prototype.scrollIntoView=function(
33453345
this: FragmentInstanceType,
33463346
alignToTop?: boolean,
33473347
): void{
33483348
if(typeofalignToTop==='object'){
33493349
thrownewError(
3350-
'FragmentInstance.experimental_scrollIntoView() does not support '+
3350+
'FragmentInstance.scrollIntoView() does not support '+
33513351
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
33523352
);
33533353
}

‎packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1960,9 +1960,9 @@ describe('FragmentRefs', () => {
19601960
});
19611961

19621962
expect(()=>{
1963-
fragmentRef.current.experimental_scrollIntoView({block: 'start'});
1963+
fragmentRef.current.scrollIntoView({block: 'start'});
19641964
}).toThrowError(
1965-
'FragmentInstance.experimental_scrollIntoView() does not support '+
1965+
'FragmentInstance.scrollIntoView() does not support '+
19661966
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
19671967
);
19681968
});
@@ -1996,11 +1996,11 @@ describe('FragmentRefs', () => {
19961996
});
19971997

19981998
// Default call
1999-
fragmentRef.current.experimental_scrollIntoView();
1999+
fragmentRef.current.scrollIntoView();
20002000
expectLast(logs,'childA');
20012001
logs=[];
20022002
// alignToTop=true
2003-
fragmentRef.current.experimental_scrollIntoView(true);
2003+
fragmentRef.current.scrollIntoView(true);
20042004
expectLast(logs,'childA');
20052005
});
20062006

@@ -2027,7 +2027,7 @@ describe('FragmentRefs', () => {
20272027
logs.push('childB');
20282028
});
20292029

2030-
fragmentRef.current.experimental_scrollIntoView(false);
2030+
fragmentRef.current.scrollIntoView(false);
20312031
expectLast(logs,'childB');
20322032
});
20332033

@@ -2068,7 +2068,7 @@ describe('FragmentRefs', () => {
20682068
});
20692069

20702070
// Default call
2071-
fragmentRef.current.experimental_scrollIntoView();
2071+
fragmentRef.current.scrollIntoView();
20722072
expectLast(logs,'childA');
20732073
});
20742074

@@ -2157,7 +2157,7 @@ describe('FragmentRefs', () => {
21572157
});
21582158

21592159
// Default call
2160-
fragmentRef.current.experimental_scrollIntoView();
2160+
fragmentRef.current.scrollIntoView();
21612161
expectLast(logs,'header');
21622162

21632163
childARef.current.scrollIntoView.mockClear();
@@ -2167,7 +2167,7 @@ describe('FragmentRefs', () => {
21672167
logs=[];
21682168

21692169
// // alignToTop=false
2170-
fragmentRef.current.experimental_scrollIntoView(false);
2170+
fragmentRef.current.scrollIntoView(false);
21712171
expectLast(logs,'C');
21722172
});
21732173
});
@@ -2195,14 +2195,14 @@ describe('FragmentRefs', () => {
21952195
siblingBRef.current.scrollIntoView=jest.fn();
21962196

21972197
// Default call
2198-
fragmentRef.current.experimental_scrollIntoView();
2198+
fragmentRef.current.scrollIntoView();
21992199
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22002200
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22012201

22022202
siblingBRef.current.scrollIntoView.mockClear();
22032203

22042204
// alignToTop=true
2205-
fragmentRef.current.experimental_scrollIntoView(true);
2205+
fragmentRef.current.scrollIntoView(true);
22062206
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22072207
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22082208
});
@@ -2239,7 +2239,7 @@ describe('FragmentRefs', () => {
22392239
siblingBRef.current.scrollIntoView=jest.fn();
22402240

22412241
// alignToTop=false
2242-
fragmentRef.current.experimental_scrollIntoView(false);
2242+
fragmentRef.current.scrollIntoView(false);
22432243
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22442244
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22452245
});
@@ -2260,7 +2260,7 @@ describe('FragmentRefs', () => {
22602260
});
22612261

22622262
parentRef.current.scrollIntoView=jest.fn();
2263-
fragmentRef.current.experimental_scrollIntoView();
2263+
fragmentRef.current.scrollIntoView();
22642264
expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22652265
});
22662266
});

‎packages/shared/ReactFeatureFlags.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ export const transitionLaneExpirationMs = 5000;
145145
*/
146146
exportconstenableInfiniteRenderLoopDetection: boolean=false;
147147

148-
exportconstenableFragmentRefs=__EXPERIMENTAL__;
149-
exportconstenableFragmentRefsScrollIntoView=__EXPERIMENTAL__;
148+
exportconstenableFragmentRefs: boolean=true;
149+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
150150

151151
// -----------------------------------------------------------------------------
152152
// Ready for next major.

‎packages/shared/forks/ReactFeatureFlags.native-oss.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const enableHydrationChangeEvent: boolean = false;
7272
exportconstenableDefaultTransitionIndicator: boolean=false;
7373
exportconstownerStackLimit=1e4;
7474

75-
exportconstenableFragmentRefs: boolean=false;
75+
exportconstenableFragmentRefs: boolean=true;
7676
exportconstenableFragmentRefsScrollIntoView: boolean=false;
7777

7878
// Profiling Only

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export const enableHydrationChangeEvent: boolean = false;
7373
exportconstenableDefaultTransitionIndicator: boolean=false;
7474
exportconstownerStackLimit=1e4;
7575

76-
exportconstenableFragmentRefs: boolean=false;
77-
exportconstenableFragmentRefsScrollIntoView: boolean=false;
76+
exportconstenableFragmentRefs: boolean=true;
77+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
7878

7979
// TODO: This must be in sync with the main ReactFeatureFlags file because
8080
// the Test Renderer's value must be the same as the one used by the

‎scripts/error-codes/codes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -551,5 +551,5 @@
551551
"563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.",
552552
"564": "Unknown command. The debugChannel was not wired up properly.",
553553
"565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
554-
"566": "FragmentInstance.experimental_scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
554+
"566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
555555
}

0 commit comments

Comments
 (0)
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
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;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Release Fragment refs to Canary (#34720) · react/react@a4eb2df · GitHub
Skip to content

Commit a4eb2df

Browse files
authored
Release Fragment refs to Canary (#34720)
## Overview This PR adds the `ref` prop to `<Fragment>` in `react@canary`. This means this API is ready for final feedback and prepared for a semver stable release. ## What this means Shipping Fragment refs to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like Fragment refs with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like Fragment refs. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like Fragment refs as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#fragment-refs) blog post, and [the new docs for Fragment refs`](https://react.dev/reference/react/Fragment#fragmentinstance) for more info.
1 parent 6a8c7fb commit a4eb2df

7 files changed

Lines changed: 22 additions & 22 deletions

File tree

‎fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ export default function ScrollIntoViewCase() {
5555
constscrollContainerRef=useRef(null);
5656

5757
constscrollVertical=()=>{
58-
fragmentRef.current.experimental_scrollIntoView(alignToTop);
58+
fragmentRef.current.scrollIntoView(alignToTop);
5959
};
6060

6161
constscrollVerticalNoChildren=()=>{
62-
noChildRef.current.experimental_scrollIntoView(alignToTop);
62+
noChildRef.current.scrollIntoView(alignToTop);
6363
};
6464

6565
useEffect(()=>{

‎packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3341,13 +3341,13 @@ function validateDocumentPositionWithFiberTree(
33413341

33423342
if(enableFragmentRefsScrollIntoView){
33433343
// $FlowFixMe[prop-missing]
3344-
FragmentInstance.prototype.experimental_scrollIntoView=function(
3344+
FragmentInstance.prototype.scrollIntoView=function(
33453345
this: FragmentInstanceType,
33463346
alignToTop?: boolean,
33473347
): void{
33483348
if(typeofalignToTop==='object'){
33493349
thrownewError(
3350-
'FragmentInstance.experimental_scrollIntoView() does not support '+
3350+
'FragmentInstance.scrollIntoView() does not support '+
33513351
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
33523352
);
33533353
}

‎packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1960,9 +1960,9 @@ describe('FragmentRefs', () => {
19601960
});
19611961

19621962
expect(()=>{
1963-
fragmentRef.current.experimental_scrollIntoView({block: 'start'});
1963+
fragmentRef.current.scrollIntoView({block: 'start'});
19641964
}).toThrowError(
1965-
'FragmentInstance.experimental_scrollIntoView() does not support '+
1965+
'FragmentInstance.scrollIntoView() does not support '+
19661966
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
19671967
);
19681968
});
@@ -1996,11 +1996,11 @@ describe('FragmentRefs', () => {
19961996
});
19971997

19981998
// Default call
1999-
fragmentRef.current.experimental_scrollIntoView();
1999+
fragmentRef.current.scrollIntoView();
20002000
expectLast(logs,'childA');
20012001
logs=[];
20022002
// alignToTop=true
2003-
fragmentRef.current.experimental_scrollIntoView(true);
2003+
fragmentRef.current.scrollIntoView(true);
20042004
expectLast(logs,'childA');
20052005
});
20062006

@@ -2027,7 +2027,7 @@ describe('FragmentRefs', () => {
20272027
logs.push('childB');
20282028
});
20292029

2030-
fragmentRef.current.experimental_scrollIntoView(false);
2030+
fragmentRef.current.scrollIntoView(false);
20312031
expectLast(logs,'childB');
20322032
});
20332033

@@ -2068,7 +2068,7 @@ describe('FragmentRefs', () => {
20682068
});
20692069

20702070
// Default call
2071-
fragmentRef.current.experimental_scrollIntoView();
2071+
fragmentRef.current.scrollIntoView();
20722072
expectLast(logs,'childA');
20732073
});
20742074

@@ -2157,7 +2157,7 @@ describe('FragmentRefs', () => {
21572157
});
21582158

21592159
// Default call
2160-
fragmentRef.current.experimental_scrollIntoView();
2160+
fragmentRef.current.scrollIntoView();
21612161
expectLast(logs,'header');
21622162

21632163
childARef.current.scrollIntoView.mockClear();
@@ -2167,7 +2167,7 @@ describe('FragmentRefs', () => {
21672167
logs=[];
21682168

21692169
// // alignToTop=false
2170-
fragmentRef.current.experimental_scrollIntoView(false);
2170+
fragmentRef.current.scrollIntoView(false);
21712171
expectLast(logs,'C');
21722172
});
21732173
});
@@ -2195,14 +2195,14 @@ describe('FragmentRefs', () => {
21952195
siblingBRef.current.scrollIntoView=jest.fn();
21962196

21972197
// Default call
2198-
fragmentRef.current.experimental_scrollIntoView();
2198+
fragmentRef.current.scrollIntoView();
21992199
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22002200
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22012201

22022202
siblingBRef.current.scrollIntoView.mockClear();
22032203

22042204
// alignToTop=true
2205-
fragmentRef.current.experimental_scrollIntoView(true);
2205+
fragmentRef.current.scrollIntoView(true);
22062206
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22072207
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22082208
});
@@ -2239,7 +2239,7 @@ describe('FragmentRefs', () => {
22392239
siblingBRef.current.scrollIntoView=jest.fn();
22402240

22412241
// alignToTop=false
2242-
fragmentRef.current.experimental_scrollIntoView(false);
2242+
fragmentRef.current.scrollIntoView(false);
22432243
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22442244
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22452245
});
@@ -2260,7 +2260,7 @@ describe('FragmentRefs', () => {
22602260
});
22612261

22622262
parentRef.current.scrollIntoView=jest.fn();
2263-
fragmentRef.current.experimental_scrollIntoView();
2263+
fragmentRef.current.scrollIntoView();
22642264
expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22652265
});
22662266
});

‎packages/shared/ReactFeatureFlags.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ export const transitionLaneExpirationMs = 5000;
145145
*/
146146
exportconstenableInfiniteRenderLoopDetection: boolean=false;
147147

148-
exportconstenableFragmentRefs=__EXPERIMENTAL__;
149-
exportconstenableFragmentRefsScrollIntoView=__EXPERIMENTAL__;
148+
exportconstenableFragmentRefs: boolean=true;
149+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
150150

151151
// -----------------------------------------------------------------------------
152152
// Ready for next major.

‎packages/shared/forks/ReactFeatureFlags.native-oss.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const enableHydrationChangeEvent: boolean = false;
7272
exportconstenableDefaultTransitionIndicator: boolean=false;
7373
exportconstownerStackLimit=1e4;
7474

75-
exportconstenableFragmentRefs: boolean=false;
75+
exportconstenableFragmentRefs: boolean=true;
7676
exportconstenableFragmentRefsScrollIntoView: boolean=false;
7777

7878
// Profiling Only

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export const enableHydrationChangeEvent: boolean = false;
7373
exportconstenableDefaultTransitionIndicator: boolean=false;
7474
exportconstownerStackLimit=1e4;
7575

76-
exportconstenableFragmentRefs: boolean=false;
77-
exportconstenableFragmentRefsScrollIntoView: boolean=false;
76+
exportconstenableFragmentRefs: boolean=true;
77+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
7878

7979
// TODO: This must be in sync with the main ReactFeatureFlags file because
8080
// the Test Renderer's value must be the same as the one used by the

‎scripts/error-codes/codes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -551,5 +551,5 @@
551551
"563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.",
552552
"564": "Unknown command. The debugChannel was not wired up properly.",
553553
"565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
554-
"566": "FragmentInstance.experimental_scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
554+
"566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
555555
}

0 commit comments

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

Commit a4eb2df

Browse files
authored
Release Fragment refs to Canary (#34720)
## Overview This PR adds the `ref` prop to `<Fragment>` in `react@canary`. This means this API is ready for final feedback and prepared for a semver stable release. ## What this means Shipping Fragment refs to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like Fragment refs with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like Fragment refs. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like Fragment refs as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#fragment-refs) blog post, and [the new docs for Fragment refs`](https://react.dev/reference/react/Fragment#fragmentinstance) for more info.
1 parent 6a8c7fb commit a4eb2df

7 files changed

Lines changed: 22 additions & 22 deletions

File tree

‎fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ export default function ScrollIntoViewCase() {
5555
constscrollContainerRef=useRef(null);
5656

5757
constscrollVertical=()=>{
58-
fragmentRef.current.experimental_scrollIntoView(alignToTop);
58+
fragmentRef.current.scrollIntoView(alignToTop);
5959
};
6060

6161
constscrollVerticalNoChildren=()=>{
62-
noChildRef.current.experimental_scrollIntoView(alignToTop);
62+
noChildRef.current.scrollIntoView(alignToTop);
6363
};
6464

6565
useEffect(()=>{

‎packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3341,13 +3341,13 @@ function validateDocumentPositionWithFiberTree(
33413341

33423342
if(enableFragmentRefsScrollIntoView){
33433343
// $FlowFixMe[prop-missing]
3344-
FragmentInstance.prototype.experimental_scrollIntoView=function(
3344+
FragmentInstance.prototype.scrollIntoView=function(
33453345
this: FragmentInstanceType,
33463346
alignToTop?: boolean,
33473347
): void{
33483348
if(typeofalignToTop==='object'){
33493349
thrownewError(
3350-
'FragmentInstance.experimental_scrollIntoView() does not support '+
3350+
'FragmentInstance.scrollIntoView() does not support '+
33513351
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
33523352
);
33533353
}

‎packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1960,9 +1960,9 @@ describe('FragmentRefs', () => {
19601960
});
19611961

19621962
expect(()=>{
1963-
fragmentRef.current.experimental_scrollIntoView({block: 'start'});
1963+
fragmentRef.current.scrollIntoView({block: 'start'});
19641964
}).toThrowError(
1965-
'FragmentInstance.experimental_scrollIntoView() does not support '+
1965+
'FragmentInstance.scrollIntoView() does not support '+
19661966
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
19671967
);
19681968
});
@@ -1996,11 +1996,11 @@ describe('FragmentRefs', () => {
19961996
});
19971997

19981998
// Default call
1999-
fragmentRef.current.experimental_scrollIntoView();
1999+
fragmentRef.current.scrollIntoView();
20002000
expectLast(logs,'childA');
20012001
logs=[];
20022002
// alignToTop=true
2003-
fragmentRef.current.experimental_scrollIntoView(true);
2003+
fragmentRef.current.scrollIntoView(true);
20042004
expectLast(logs,'childA');
20052005
});
20062006

@@ -2027,7 +2027,7 @@ describe('FragmentRefs', () => {
20272027
logs.push('childB');
20282028
});
20292029

2030-
fragmentRef.current.experimental_scrollIntoView(false);
2030+
fragmentRef.current.scrollIntoView(false);
20312031
expectLast(logs,'childB');
20322032
});
20332033

@@ -2068,7 +2068,7 @@ describe('FragmentRefs', () => {
20682068
});
20692069

20702070
// Default call
2071-
fragmentRef.current.experimental_scrollIntoView();
2071+
fragmentRef.current.scrollIntoView();
20722072
expectLast(logs,'childA');
20732073
});
20742074

@@ -2157,7 +2157,7 @@ describe('FragmentRefs', () => {
21572157
});
21582158

21592159
// Default call
2160-
fragmentRef.current.experimental_scrollIntoView();
2160+
fragmentRef.current.scrollIntoView();
21612161
expectLast(logs,'header');
21622162

21632163
childARef.current.scrollIntoView.mockClear();
@@ -2167,7 +2167,7 @@ describe('FragmentRefs', () => {
21672167
logs=[];
21682168

21692169
// // alignToTop=false
2170-
fragmentRef.current.experimental_scrollIntoView(false);
2170+
fragmentRef.current.scrollIntoView(false);
21712171
expectLast(logs,'C');
21722172
});
21732173
});
@@ -2195,14 +2195,14 @@ describe('FragmentRefs', () => {
21952195
siblingBRef.current.scrollIntoView=jest.fn();
21962196

21972197
// Default call
2198-
fragmentRef.current.experimental_scrollIntoView();
2198+
fragmentRef.current.scrollIntoView();
21992199
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22002200
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22012201

22022202
siblingBRef.current.scrollIntoView.mockClear();
22032203

22042204
// alignToTop=true
2205-
fragmentRef.current.experimental_scrollIntoView(true);
2205+
fragmentRef.current.scrollIntoView(true);
22062206
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22072207
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22082208
});
@@ -2239,7 +2239,7 @@ describe('FragmentRefs', () => {
22392239
siblingBRef.current.scrollIntoView=jest.fn();
22402240

22412241
// alignToTop=false
2242-
fragmentRef.current.experimental_scrollIntoView(false);
2242+
fragmentRef.current.scrollIntoView(false);
22432243
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22442244
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22452245
});
@@ -2260,7 +2260,7 @@ describe('FragmentRefs', () => {
22602260
});
22612261

22622262
parentRef.current.scrollIntoView=jest.fn();
2263-
fragmentRef.current.experimental_scrollIntoView();
2263+
fragmentRef.current.scrollIntoView();
22642264
expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22652265
});
22662266
});

‎packages/shared/ReactFeatureFlags.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ export const transitionLaneExpirationMs = 5000;
145145
*/
146146
exportconstenableInfiniteRenderLoopDetection: boolean=false;
147147

148-
exportconstenableFragmentRefs=__EXPERIMENTAL__;
149-
exportconstenableFragmentRefsScrollIntoView=__EXPERIMENTAL__;
148+
exportconstenableFragmentRefs: boolean=true;
149+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
150150

151151
// -----------------------------------------------------------------------------
152152
// Ready for next major.

‎packages/shared/forks/ReactFeatureFlags.native-oss.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const enableHydrationChangeEvent: boolean = false;
7272
exportconstenableDefaultTransitionIndicator: boolean=false;
7373
exportconstownerStackLimit=1e4;
7474

75-
exportconstenableFragmentRefs: boolean=false;
75+
exportconstenableFragmentRefs: boolean=true;
7676
exportconstenableFragmentRefsScrollIntoView: boolean=false;
7777

7878
// Profiling Only

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export const enableHydrationChangeEvent: boolean = false;
7373
exportconstenableDefaultTransitionIndicator: boolean=false;
7474
exportconstownerStackLimit=1e4;
7575

76-
exportconstenableFragmentRefs: boolean=false;
77-
exportconstenableFragmentRefsScrollIntoView: boolean=false;
76+
exportconstenableFragmentRefs: boolean=true;
77+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
7878

7979
// TODO: This must be in sync with the main ReactFeatureFlags file because
8080
// the Test Renderer's value must be the same as the one used by the

‎scripts/error-codes/codes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -551,5 +551,5 @@
551551
"563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.",
552552
"564": "Unknown command. The debugChannel was not wired up properly.",
553553
"565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
554-
"566": "FragmentInstance.experimental_scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
554+
"566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
555555
}

0 commit comments

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

Commit a4eb2df

Browse files
authored
Release Fragment refs to Canary (#34720)
## Overview This PR adds the `ref` prop to `<Fragment>` in `react@canary`. This means this API is ready for final feedback and prepared for a semver stable release. ## What this means Shipping Fragment refs to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like Fragment refs with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like Fragment refs. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like Fragment refs as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#fragment-refs) blog post, and [the new docs for Fragment refs`](https://react.dev/reference/react/Fragment#fragmentinstance) for more info.
1 parent 6a8c7fb commit a4eb2df

7 files changed

Lines changed: 22 additions & 22 deletions

File tree

‎fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ export default function ScrollIntoViewCase() {
5555
constscrollContainerRef=useRef(null);
5656

5757
constscrollVertical=()=>{
58-
fragmentRef.current.experimental_scrollIntoView(alignToTop);
58+
fragmentRef.current.scrollIntoView(alignToTop);
5959
};
6060

6161
constscrollVerticalNoChildren=()=>{
62-
noChildRef.current.experimental_scrollIntoView(alignToTop);
62+
noChildRef.current.scrollIntoView(alignToTop);
6363
};
6464

6565
useEffect(()=>{

‎packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3341,13 +3341,13 @@ function validateDocumentPositionWithFiberTree(
33413341

33423342
if(enableFragmentRefsScrollIntoView){
33433343
// $FlowFixMe[prop-missing]
3344-
FragmentInstance.prototype.experimental_scrollIntoView=function(
3344+
FragmentInstance.prototype.scrollIntoView=function(
33453345
this: FragmentInstanceType,
33463346
alignToTop?: boolean,
33473347
): void{
33483348
if(typeofalignToTop==='object'){
33493349
thrownewError(
3350-
'FragmentInstance.experimental_scrollIntoView() does not support '+
3350+
'FragmentInstance.scrollIntoView() does not support '+
33513351
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
33523352
);
33533353
}

‎packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1960,9 +1960,9 @@ describe('FragmentRefs', () => {
19601960
});
19611961

19621962
expect(()=>{
1963-
fragmentRef.current.experimental_scrollIntoView({block: 'start'});
1963+
fragmentRef.current.scrollIntoView({block: 'start'});
19641964
}).toThrowError(
1965-
'FragmentInstance.experimental_scrollIntoView() does not support '+
1965+
'FragmentInstance.scrollIntoView() does not support '+
19661966
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
19671967
);
19681968
});
@@ -1996,11 +1996,11 @@ describe('FragmentRefs', () => {
19961996
});
19971997

19981998
// Default call
1999-
fragmentRef.current.experimental_scrollIntoView();
1999+
fragmentRef.current.scrollIntoView();
20002000
expectLast(logs,'childA');
20012001
logs=[];
20022002
// alignToTop=true
2003-
fragmentRef.current.experimental_scrollIntoView(true);
2003+
fragmentRef.current.scrollIntoView(true);
20042004
expectLast(logs,'childA');
20052005
});
20062006

@@ -2027,7 +2027,7 @@ describe('FragmentRefs', () => {
20272027
logs.push('childB');
20282028
});
20292029

2030-
fragmentRef.current.experimental_scrollIntoView(false);
2030+
fragmentRef.current.scrollIntoView(false);
20312031
expectLast(logs,'childB');
20322032
});
20332033

@@ -2068,7 +2068,7 @@ describe('FragmentRefs', () => {
20682068
});
20692069

20702070
// Default call
2071-
fragmentRef.current.experimental_scrollIntoView();
2071+
fragmentRef.current.scrollIntoView();
20722072
expectLast(logs,'childA');
20732073
});
20742074

@@ -2157,7 +2157,7 @@ describe('FragmentRefs', () => {
21572157
});
21582158

21592159
// Default call
2160-
fragmentRef.current.experimental_scrollIntoView();
2160+
fragmentRef.current.scrollIntoView();
21612161
expectLast(logs,'header');
21622162

21632163
childARef.current.scrollIntoView.mockClear();
@@ -2167,7 +2167,7 @@ describe('FragmentRefs', () => {
21672167
logs=[];
21682168

21692169
// // alignToTop=false
2170-
fragmentRef.current.experimental_scrollIntoView(false);
2170+
fragmentRef.current.scrollIntoView(false);
21712171
expectLast(logs,'C');
21722172
});
21732173
});
@@ -2195,14 +2195,14 @@ describe('FragmentRefs', () => {
21952195
siblingBRef.current.scrollIntoView=jest.fn();
21962196

21972197
// Default call
2198-
fragmentRef.current.experimental_scrollIntoView();
2198+
fragmentRef.current.scrollIntoView();
21992199
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22002200
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22012201

22022202
siblingBRef.current.scrollIntoView.mockClear();
22032203

22042204
// alignToTop=true
2205-
fragmentRef.current.experimental_scrollIntoView(true);
2205+
fragmentRef.current.scrollIntoView(true);
22062206
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22072207
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22082208
});
@@ -2239,7 +2239,7 @@ describe('FragmentRefs', () => {
22392239
siblingBRef.current.scrollIntoView=jest.fn();
22402240

22412241
// alignToTop=false
2242-
fragmentRef.current.experimental_scrollIntoView(false);
2242+
fragmentRef.current.scrollIntoView(false);
22432243
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22442244
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22452245
});
@@ -2260,7 +2260,7 @@ describe('FragmentRefs', () => {
22602260
});
22612261

22622262
parentRef.current.scrollIntoView=jest.fn();
2263-
fragmentRef.current.experimental_scrollIntoView();
2263+
fragmentRef.current.scrollIntoView();
22642264
expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22652265
});
22662266
});

‎packages/shared/ReactFeatureFlags.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ export const transitionLaneExpirationMs = 5000;
145145
*/
146146
exportconstenableInfiniteRenderLoopDetection: boolean=false;
147147

148-
exportconstenableFragmentRefs=__EXPERIMENTAL__;
149-
exportconstenableFragmentRefsScrollIntoView=__EXPERIMENTAL__;
148+
exportconstenableFragmentRefs: boolean=true;
149+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
150150

151151
// -----------------------------------------------------------------------------
152152
// Ready for next major.

‎packages/shared/forks/ReactFeatureFlags.native-oss.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const enableHydrationChangeEvent: boolean = false;
7272
exportconstenableDefaultTransitionIndicator: boolean=false;
7373
exportconstownerStackLimit=1e4;
7474

75-
exportconstenableFragmentRefs: boolean=false;
75+
exportconstenableFragmentRefs: boolean=true;
7676
exportconstenableFragmentRefsScrollIntoView: boolean=false;
7777

7878
// Profiling Only

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export const enableHydrationChangeEvent: boolean = false;
7373
exportconstenableDefaultTransitionIndicator: boolean=false;
7474
exportconstownerStackLimit=1e4;
7575

76-
exportconstenableFragmentRefs: boolean=false;
77-
exportconstenableFragmentRefsScrollIntoView: boolean=false;
76+
exportconstenableFragmentRefs: boolean=true;
77+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
7878

7979
// TODO: This must be in sync with the main ReactFeatureFlags file because
8080
// the Test Renderer's value must be the same as the one used by the

‎scripts/error-codes/codes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -551,5 +551,5 @@
551551
"563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.",
552552
"564": "Unknown command. The debugChannel was not wired up properly.",
553553
"565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
554-
"566": "FragmentInstance.experimental_scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
554+
"566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
555555
}

0 commit comments

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

Commit a4eb2df

Browse files
authored
Release Fragment refs to Canary (#34720)
## Overview This PR adds the `ref` prop to `<Fragment>` in `react@canary`. This means this API is ready for final feedback and prepared for a semver stable release. ## What this means Shipping Fragment refs to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like Fragment refs with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like Fragment refs. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like Fragment refs as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#fragment-refs) blog post, and [the new docs for Fragment refs`](https://react.dev/reference/react/Fragment#fragmentinstance) for more info.
1 parent 6a8c7fb commit a4eb2df

7 files changed

Lines changed: 22 additions & 22 deletions

File tree

‎fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ export default function ScrollIntoViewCase() {
5555
constscrollContainerRef=useRef(null);
5656

5757
constscrollVertical=()=>{
58-
fragmentRef.current.experimental_scrollIntoView(alignToTop);
58+
fragmentRef.current.scrollIntoView(alignToTop);
5959
};
6060

6161
constscrollVerticalNoChildren=()=>{
62-
noChildRef.current.experimental_scrollIntoView(alignToTop);
62+
noChildRef.current.scrollIntoView(alignToTop);
6363
};
6464

6565
useEffect(()=>{

‎packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3341,13 +3341,13 @@ function validateDocumentPositionWithFiberTree(
33413341

33423342
if(enableFragmentRefsScrollIntoView){
33433343
// $FlowFixMe[prop-missing]
3344-
FragmentInstance.prototype.experimental_scrollIntoView=function(
3344+
FragmentInstance.prototype.scrollIntoView=function(
33453345
this: FragmentInstanceType,
33463346
alignToTop?: boolean,
33473347
): void{
33483348
if(typeofalignToTop==='object'){
33493349
thrownewError(
3350-
'FragmentInstance.experimental_scrollIntoView() does not support '+
3350+
'FragmentInstance.scrollIntoView() does not support '+
33513351
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
33523352
);
33533353
}

‎packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1960,9 +1960,9 @@ describe('FragmentRefs', () => {
19601960
});
19611961

19621962
expect(()=>{
1963-
fragmentRef.current.experimental_scrollIntoView({block: 'start'});
1963+
fragmentRef.current.scrollIntoView({block: 'start'});
19641964
}).toThrowError(
1965-
'FragmentInstance.experimental_scrollIntoView() does not support '+
1965+
'FragmentInstance.scrollIntoView() does not support '+
19661966
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
19671967
);
19681968
});
@@ -1996,11 +1996,11 @@ describe('FragmentRefs', () => {
19961996
});
19971997

19981998
// Default call
1999-
fragmentRef.current.experimental_scrollIntoView();
1999+
fragmentRef.current.scrollIntoView();
20002000
expectLast(logs,'childA');
20012001
logs=[];
20022002
// alignToTop=true
2003-
fragmentRef.current.experimental_scrollIntoView(true);
2003+
fragmentRef.current.scrollIntoView(true);
20042004
expectLast(logs,'childA');
20052005
});
20062006

@@ -2027,7 +2027,7 @@ describe('FragmentRefs', () => {
20272027
logs.push('childB');
20282028
});
20292029

2030-
fragmentRef.current.experimental_scrollIntoView(false);
2030+
fragmentRef.current.scrollIntoView(false);
20312031
expectLast(logs,'childB');
20322032
});
20332033

@@ -2068,7 +2068,7 @@ describe('FragmentRefs', () => {
20682068
});
20692069

20702070
// Default call
2071-
fragmentRef.current.experimental_scrollIntoView();
2071+
fragmentRef.current.scrollIntoView();
20722072
expectLast(logs,'childA');
20732073
});
20742074

@@ -2157,7 +2157,7 @@ describe('FragmentRefs', () => {
21572157
});
21582158

21592159
// Default call
2160-
fragmentRef.current.experimental_scrollIntoView();
2160+
fragmentRef.current.scrollIntoView();
21612161
expectLast(logs,'header');
21622162

21632163
childARef.current.scrollIntoView.mockClear();
@@ -2167,7 +2167,7 @@ describe('FragmentRefs', () => {
21672167
logs=[];
21682168

21692169
// // alignToTop=false
2170-
fragmentRef.current.experimental_scrollIntoView(false);
2170+
fragmentRef.current.scrollIntoView(false);
21712171
expectLast(logs,'C');
21722172
});
21732173
});
@@ -2195,14 +2195,14 @@ describe('FragmentRefs', () => {
21952195
siblingBRef.current.scrollIntoView=jest.fn();
21962196

21972197
// Default call
2198-
fragmentRef.current.experimental_scrollIntoView();
2198+
fragmentRef.current.scrollIntoView();
21992199
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22002200
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22012201

22022202
siblingBRef.current.scrollIntoView.mockClear();
22032203

22042204
// alignToTop=true
2205-
fragmentRef.current.experimental_scrollIntoView(true);
2205+
fragmentRef.current.scrollIntoView(true);
22062206
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22072207
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22082208
});
@@ -2239,7 +2239,7 @@ describe('FragmentRefs', () => {
22392239
siblingBRef.current.scrollIntoView=jest.fn();
22402240

22412241
// alignToTop=false
2242-
fragmentRef.current.experimental_scrollIntoView(false);
2242+
fragmentRef.current.scrollIntoView(false);
22432243
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22442244
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22452245
});
@@ -2260,7 +2260,7 @@ describe('FragmentRefs', () => {
22602260
});
22612261

22622262
parentRef.current.scrollIntoView=jest.fn();
2263-
fragmentRef.current.experimental_scrollIntoView();
2263+
fragmentRef.current.scrollIntoView();
22642264
expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22652265
});
22662266
});

‎packages/shared/ReactFeatureFlags.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ export const transitionLaneExpirationMs = 5000;
145145
*/
146146
exportconstenableInfiniteRenderLoopDetection: boolean=false;
147147

148-
exportconstenableFragmentRefs=__EXPERIMENTAL__;
149-
exportconstenableFragmentRefsScrollIntoView=__EXPERIMENTAL__;
148+
exportconstenableFragmentRefs: boolean=true;
149+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
150150

151151
// -----------------------------------------------------------------------------
152152
// Ready for next major.

‎packages/shared/forks/ReactFeatureFlags.native-oss.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const enableHydrationChangeEvent: boolean = false;
7272
exportconstenableDefaultTransitionIndicator: boolean=false;
7373
exportconstownerStackLimit=1e4;
7474

75-
exportconstenableFragmentRefs: boolean=false;
75+
exportconstenableFragmentRefs: boolean=true;
7676
exportconstenableFragmentRefsScrollIntoView: boolean=false;
7777

7878
// Profiling Only

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export const enableHydrationChangeEvent: boolean = false;
7373
exportconstenableDefaultTransitionIndicator: boolean=false;
7474
exportconstownerStackLimit=1e4;
7575

76-
exportconstenableFragmentRefs: boolean=false;
77-
exportconstenableFragmentRefsScrollIntoView: boolean=false;
76+
exportconstenableFragmentRefs: boolean=true;
77+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
7878

7979
// TODO: This must be in sync with the main ReactFeatureFlags file because
8080
// the Test Renderer's value must be the same as the one used by the

‎scripts/error-codes/codes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -551,5 +551,5 @@
551551
"563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.",
552552
"564": "Unknown command. The debugChannel was not wired up properly.",
553553
"565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
554-
"566": "FragmentInstance.experimental_scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
554+
"566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
555555
}

0 commit comments

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

Commit a4eb2df

Browse files
authored
Release Fragment refs to Canary (#34720)
## Overview This PR adds the `ref` prop to `<Fragment>` in `react@canary`. This means this API is ready for final feedback and prepared for a semver stable release. ## What this means Shipping Fragment refs to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like Fragment refs with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like Fragment refs. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like Fragment refs as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#fragment-refs) blog post, and [the new docs for Fragment refs`](https://react.dev/reference/react/Fragment#fragmentinstance) for more info.
1 parent 6a8c7fb commit a4eb2df

7 files changed

Lines changed: 22 additions & 22 deletions

File tree

‎fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ export default function ScrollIntoViewCase() {
5555
constscrollContainerRef=useRef(null);
5656

5757
constscrollVertical=()=>{
58-
fragmentRef.current.experimental_scrollIntoView(alignToTop);
58+
fragmentRef.current.scrollIntoView(alignToTop);
5959
};
6060

6161
constscrollVerticalNoChildren=()=>{
62-
noChildRef.current.experimental_scrollIntoView(alignToTop);
62+
noChildRef.current.scrollIntoView(alignToTop);
6363
};
6464

6565
useEffect(()=>{

‎packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3341,13 +3341,13 @@ function validateDocumentPositionWithFiberTree(
33413341

33423342
if(enableFragmentRefsScrollIntoView){
33433343
// $FlowFixMe[prop-missing]
3344-
FragmentInstance.prototype.experimental_scrollIntoView=function(
3344+
FragmentInstance.prototype.scrollIntoView=function(
33453345
this: FragmentInstanceType,
33463346
alignToTop?: boolean,
33473347
): void{
33483348
if(typeofalignToTop==='object'){
33493349
thrownewError(
3350-
'FragmentInstance.experimental_scrollIntoView() does not support '+
3350+
'FragmentInstance.scrollIntoView() does not support '+
33513351
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
33523352
);
33533353
}

‎packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1960,9 +1960,9 @@ describe('FragmentRefs', () => {
19601960
});
19611961

19621962
expect(()=>{
1963-
fragmentRef.current.experimental_scrollIntoView({block: 'start'});
1963+
fragmentRef.current.scrollIntoView({block: 'start'});
19641964
}).toThrowError(
1965-
'FragmentInstance.experimental_scrollIntoView() does not support '+
1965+
'FragmentInstance.scrollIntoView() does not support '+
19661966
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
19671967
);
19681968
});
@@ -1996,11 +1996,11 @@ describe('FragmentRefs', () => {
19961996
});
19971997

19981998
// Default call
1999-
fragmentRef.current.experimental_scrollIntoView();
1999+
fragmentRef.current.scrollIntoView();
20002000
expectLast(logs,'childA');
20012001
logs=[];
20022002
// alignToTop=true
2003-
fragmentRef.current.experimental_scrollIntoView(true);
2003+
fragmentRef.current.scrollIntoView(true);
20042004
expectLast(logs,'childA');
20052005
});
20062006

@@ -2027,7 +2027,7 @@ describe('FragmentRefs', () => {
20272027
logs.push('childB');
20282028
});
20292029

2030-
fragmentRef.current.experimental_scrollIntoView(false);
2030+
fragmentRef.current.scrollIntoView(false);
20312031
expectLast(logs,'childB');
20322032
});
20332033

@@ -2068,7 +2068,7 @@ describe('FragmentRefs', () => {
20682068
});
20692069

20702070
// Default call
2071-
fragmentRef.current.experimental_scrollIntoView();
2071+
fragmentRef.current.scrollIntoView();
20722072
expectLast(logs,'childA');
20732073
});
20742074

@@ -2157,7 +2157,7 @@ describe('FragmentRefs', () => {
21572157
});
21582158

21592159
// Default call
2160-
fragmentRef.current.experimental_scrollIntoView();
2160+
fragmentRef.current.scrollIntoView();
21612161
expectLast(logs,'header');
21622162

21632163
childARef.current.scrollIntoView.mockClear();
@@ -2167,7 +2167,7 @@ describe('FragmentRefs', () => {
21672167
logs=[];
21682168

21692169
// // alignToTop=false
2170-
fragmentRef.current.experimental_scrollIntoView(false);
2170+
fragmentRef.current.scrollIntoView(false);
21712171
expectLast(logs,'C');
21722172
});
21732173
});
@@ -2195,14 +2195,14 @@ describe('FragmentRefs', () => {
21952195
siblingBRef.current.scrollIntoView=jest.fn();
21962196

21972197
// Default call
2198-
fragmentRef.current.experimental_scrollIntoView();
2198+
fragmentRef.current.scrollIntoView();
21992199
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22002200
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22012201

22022202
siblingBRef.current.scrollIntoView.mockClear();
22032203

22042204
// alignToTop=true
2205-
fragmentRef.current.experimental_scrollIntoView(true);
2205+
fragmentRef.current.scrollIntoView(true);
22062206
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22072207
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22082208
});
@@ -2239,7 +2239,7 @@ describe('FragmentRefs', () => {
22392239
siblingBRef.current.scrollIntoView=jest.fn();
22402240

22412241
// alignToTop=false
2242-
fragmentRef.current.experimental_scrollIntoView(false);
2242+
fragmentRef.current.scrollIntoView(false);
22432243
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22442244
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22452245
});
@@ -2260,7 +2260,7 @@ describe('FragmentRefs', () => {
22602260
});
22612261

22622262
parentRef.current.scrollIntoView=jest.fn();
2263-
fragmentRef.current.experimental_scrollIntoView();
2263+
fragmentRef.current.scrollIntoView();
22642264
expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22652265
});
22662266
});

‎packages/shared/ReactFeatureFlags.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ export const transitionLaneExpirationMs = 5000;
145145
*/
146146
exportconstenableInfiniteRenderLoopDetection: boolean=false;
147147

148-
exportconstenableFragmentRefs=__EXPERIMENTAL__;
149-
exportconstenableFragmentRefsScrollIntoView=__EXPERIMENTAL__;
148+
exportconstenableFragmentRefs: boolean=true;
149+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
150150

151151
// -----------------------------------------------------------------------------
152152
// Ready for next major.

‎packages/shared/forks/ReactFeatureFlags.native-oss.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const enableHydrationChangeEvent: boolean = false;
7272
exportconstenableDefaultTransitionIndicator: boolean=false;
7373
exportconstownerStackLimit=1e4;
7474

75-
exportconstenableFragmentRefs: boolean=false;
75+
exportconstenableFragmentRefs: boolean=true;
7676
exportconstenableFragmentRefsScrollIntoView: boolean=false;
7777

7878
// Profiling Only

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export const enableHydrationChangeEvent: boolean = false;
7373
exportconstenableDefaultTransitionIndicator: boolean=false;
7474
exportconstownerStackLimit=1e4;
7575

76-
exportconstenableFragmentRefs: boolean=false;
77-
exportconstenableFragmentRefsScrollIntoView: boolean=false;
76+
exportconstenableFragmentRefs: boolean=true;
77+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
7878

7979
// TODO: This must be in sync with the main ReactFeatureFlags file because
8080
// the Test Renderer's value must be the same as the one used by the

‎scripts/error-codes/codes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -551,5 +551,5 @@
551551
"563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.",
552552
"564": "Unknown command. The debugChannel was not wired up properly.",
553553
"565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
554-
"566": "FragmentInstance.experimental_scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
554+
"566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
555555
}

0 commit comments

Comments
 (0)
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Release Fragment refs to Canary (#34720) · react/react@a4eb2df · GitHub
Skip to content

Commit a4eb2df

Browse files
authored
Release Fragment refs to Canary (#34720)
## Overview This PR adds the `ref` prop to `<Fragment>` in `react@canary`. This means this API is ready for final feedback and prepared for a semver stable release. ## What this means Shipping Fragment refs to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like Fragment refs with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like Fragment refs. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like Fragment refs as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#fragment-refs) blog post, and [the new docs for Fragment refs`](https://react.dev/reference/react/Fragment#fragmentinstance) for more info.
1 parent 6a8c7fb commit a4eb2df

7 files changed

Lines changed: 22 additions & 22 deletions

File tree

‎fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ export default function ScrollIntoViewCase() {
5555
constscrollContainerRef=useRef(null);
5656

5757
constscrollVertical=()=>{
58-
fragmentRef.current.experimental_scrollIntoView(alignToTop);
58+
fragmentRef.current.scrollIntoView(alignToTop);
5959
};
6060

6161
constscrollVerticalNoChildren=()=>{
62-
noChildRef.current.experimental_scrollIntoView(alignToTop);
62+
noChildRef.current.scrollIntoView(alignToTop);
6363
};
6464

6565
useEffect(()=>{

‎packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3341,13 +3341,13 @@ function validateDocumentPositionWithFiberTree(
33413341

33423342
if(enableFragmentRefsScrollIntoView){
33433343
// $FlowFixMe[prop-missing]
3344-
FragmentInstance.prototype.experimental_scrollIntoView=function(
3344+
FragmentInstance.prototype.scrollIntoView=function(
33453345
this: FragmentInstanceType,
33463346
alignToTop?: boolean,
33473347
): void{
33483348
if(typeofalignToTop==='object'){
33493349
thrownewError(
3350-
'FragmentInstance.experimental_scrollIntoView() does not support '+
3350+
'FragmentInstance.scrollIntoView() does not support '+
33513351
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
33523352
);
33533353
}

‎packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1960,9 +1960,9 @@ describe('FragmentRefs', () => {
19601960
});
19611961

19621962
expect(()=>{
1963-
fragmentRef.current.experimental_scrollIntoView({block: 'start'});
1963+
fragmentRef.current.scrollIntoView({block: 'start'});
19641964
}).toThrowError(
1965-
'FragmentInstance.experimental_scrollIntoView() does not support '+
1965+
'FragmentInstance.scrollIntoView() does not support '+
19661966
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
19671967
);
19681968
});
@@ -1996,11 +1996,11 @@ describe('FragmentRefs', () => {
19961996
});
19971997

19981998
// Default call
1999-
fragmentRef.current.experimental_scrollIntoView();
1999+
fragmentRef.current.scrollIntoView();
20002000
expectLast(logs,'childA');
20012001
logs=[];
20022002
// alignToTop=true
2003-
fragmentRef.current.experimental_scrollIntoView(true);
2003+
fragmentRef.current.scrollIntoView(true);
20042004
expectLast(logs,'childA');
20052005
});
20062006

@@ -2027,7 +2027,7 @@ describe('FragmentRefs', () => {
20272027
logs.push('childB');
20282028
});
20292029

2030-
fragmentRef.current.experimental_scrollIntoView(false);
2030+
fragmentRef.current.scrollIntoView(false);
20312031
expectLast(logs,'childB');
20322032
});
20332033

@@ -2068,7 +2068,7 @@ describe('FragmentRefs', () => {
20682068
});
20692069

20702070
// Default call
2071-
fragmentRef.current.experimental_scrollIntoView();
2071+
fragmentRef.current.scrollIntoView();
20722072
expectLast(logs,'childA');
20732073
});
20742074

@@ -2157,7 +2157,7 @@ describe('FragmentRefs', () => {
21572157
});
21582158

21592159
// Default call
2160-
fragmentRef.current.experimental_scrollIntoView();
2160+
fragmentRef.current.scrollIntoView();
21612161
expectLast(logs,'header');
21622162

21632163
childARef.current.scrollIntoView.mockClear();
@@ -2167,7 +2167,7 @@ describe('FragmentRefs', () => {
21672167
logs=[];
21682168

21692169
// // alignToTop=false
2170-
fragmentRef.current.experimental_scrollIntoView(false);
2170+
fragmentRef.current.scrollIntoView(false);
21712171
expectLast(logs,'C');
21722172
});
21732173
});
@@ -2195,14 +2195,14 @@ describe('FragmentRefs', () => {
21952195
siblingBRef.current.scrollIntoView=jest.fn();
21962196

21972197
// Default call
2198-
fragmentRef.current.experimental_scrollIntoView();
2198+
fragmentRef.current.scrollIntoView();
21992199
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22002200
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22012201

22022202
siblingBRef.current.scrollIntoView.mockClear();
22032203

22042204
// alignToTop=true
2205-
fragmentRef.current.experimental_scrollIntoView(true);
2205+
fragmentRef.current.scrollIntoView(true);
22062206
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22072207
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22082208
});
@@ -2239,7 +2239,7 @@ describe('FragmentRefs', () => {
22392239
siblingBRef.current.scrollIntoView=jest.fn();
22402240

22412241
// alignToTop=false
2242-
fragmentRef.current.experimental_scrollIntoView(false);
2242+
fragmentRef.current.scrollIntoView(false);
22432243
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22442244
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22452245
});
@@ -2260,7 +2260,7 @@ describe('FragmentRefs', () => {
22602260
});
22612261

22622262
parentRef.current.scrollIntoView=jest.fn();
2263-
fragmentRef.current.experimental_scrollIntoView();
2263+
fragmentRef.current.scrollIntoView();
22642264
expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22652265
});
22662266
});

‎packages/shared/ReactFeatureFlags.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ export const transitionLaneExpirationMs = 5000;
145145
*/
146146
exportconstenableInfiniteRenderLoopDetection: boolean=false;
147147

148-
exportconstenableFragmentRefs=__EXPERIMENTAL__;
149-
exportconstenableFragmentRefsScrollIntoView=__EXPERIMENTAL__;
148+
exportconstenableFragmentRefs: boolean=true;
149+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
150150

151151
// -----------------------------------------------------------------------------
152152
// Ready for next major.

‎packages/shared/forks/ReactFeatureFlags.native-oss.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const enableHydrationChangeEvent: boolean = false;
7272
exportconstenableDefaultTransitionIndicator: boolean=false;
7373
exportconstownerStackLimit=1e4;
7474

75-
exportconstenableFragmentRefs: boolean=false;
75+
exportconstenableFragmentRefs: boolean=true;
7676
exportconstenableFragmentRefsScrollIntoView: boolean=false;
7777

7878
// Profiling Only

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export const enableHydrationChangeEvent: boolean = false;
7373
exportconstenableDefaultTransitionIndicator: boolean=false;
7474
exportconstownerStackLimit=1e4;
7575

76-
exportconstenableFragmentRefs: boolean=false;
77-
exportconstenableFragmentRefsScrollIntoView: boolean=false;
76+
exportconstenableFragmentRefs: boolean=true;
77+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
7878

7979
// TODO: This must be in sync with the main ReactFeatureFlags file because
8080
// the Test Renderer's value must be the same as the one used by the

‎scripts/error-codes/codes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -551,5 +551,5 @@
551551
"563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.",
552552
"564": "Unknown command. The debugChannel was not wired up properly.",
553553
"565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
554-
"566": "FragmentInstance.experimental_scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
554+
"566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
555555
}

0 commit comments

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

Commit a4eb2df

Browse files
authored
Release Fragment refs to Canary (#34720)
## Overview This PR adds the `ref` prop to `<Fragment>` in `react@canary`. This means this API is ready for final feedback and prepared for a semver stable release. ## What this means Shipping Fragment refs to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like Fragment refs with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like Fragment refs. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like Fragment refs as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#fragment-refs) blog post, and [the new docs for Fragment refs`](https://react.dev/reference/react/Fragment#fragmentinstance) for more info.
1 parent 6a8c7fb commit a4eb2df

7 files changed

Lines changed: 22 additions & 22 deletions

File tree

‎fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ export default function ScrollIntoViewCase() {
5555
constscrollContainerRef=useRef(null);
5656

5757
constscrollVertical=()=>{
58-
fragmentRef.current.experimental_scrollIntoView(alignToTop);
58+
fragmentRef.current.scrollIntoView(alignToTop);
5959
};
6060

6161
constscrollVerticalNoChildren=()=>{
62-
noChildRef.current.experimental_scrollIntoView(alignToTop);
62+
noChildRef.current.scrollIntoView(alignToTop);
6363
};
6464

6565
useEffect(()=>{

‎packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3341,13 +3341,13 @@ function validateDocumentPositionWithFiberTree(
33413341

33423342
if(enableFragmentRefsScrollIntoView){
33433343
// $FlowFixMe[prop-missing]
3344-
FragmentInstance.prototype.experimental_scrollIntoView=function(
3344+
FragmentInstance.prototype.scrollIntoView=function(
33453345
this: FragmentInstanceType,
33463346
alignToTop?: boolean,
33473347
): void{
33483348
if(typeofalignToTop==='object'){
33493349
thrownewError(
3350-
'FragmentInstance.experimental_scrollIntoView() does not support '+
3350+
'FragmentInstance.scrollIntoView() does not support '+
33513351
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
33523352
);
33533353
}

‎packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1960,9 +1960,9 @@ describe('FragmentRefs', () => {
19601960
});
19611961

19621962
expect(()=>{
1963-
fragmentRef.current.experimental_scrollIntoView({block: 'start'});
1963+
fragmentRef.current.scrollIntoView({block: 'start'});
19641964
}).toThrowError(
1965-
'FragmentInstance.experimental_scrollIntoView() does not support '+
1965+
'FragmentInstance.scrollIntoView() does not support '+
19661966
'scrollIntoViewOptions. Use the alignToTop boolean instead.',
19671967
);
19681968
});
@@ -1996,11 +1996,11 @@ describe('FragmentRefs', () => {
19961996
});
19971997

19981998
// Default call
1999-
fragmentRef.current.experimental_scrollIntoView();
1999+
fragmentRef.current.scrollIntoView();
20002000
expectLast(logs,'childA');
20012001
logs=[];
20022002
// alignToTop=true
2003-
fragmentRef.current.experimental_scrollIntoView(true);
2003+
fragmentRef.current.scrollIntoView(true);
20042004
expectLast(logs,'childA');
20052005
});
20062006

@@ -2027,7 +2027,7 @@ describe('FragmentRefs', () => {
20272027
logs.push('childB');
20282028
});
20292029

2030-
fragmentRef.current.experimental_scrollIntoView(false);
2030+
fragmentRef.current.scrollIntoView(false);
20312031
expectLast(logs,'childB');
20322032
});
20332033

@@ -2068,7 +2068,7 @@ describe('FragmentRefs', () => {
20682068
});
20692069

20702070
// Default call
2071-
fragmentRef.current.experimental_scrollIntoView();
2071+
fragmentRef.current.scrollIntoView();
20722072
expectLast(logs,'childA');
20732073
});
20742074

@@ -2157,7 +2157,7 @@ describe('FragmentRefs', () => {
21572157
});
21582158

21592159
// Default call
2160-
fragmentRef.current.experimental_scrollIntoView();
2160+
fragmentRef.current.scrollIntoView();
21612161
expectLast(logs,'header');
21622162

21632163
childARef.current.scrollIntoView.mockClear();
@@ -2167,7 +2167,7 @@ describe('FragmentRefs', () => {
21672167
logs=[];
21682168

21692169
// // alignToTop=false
2170-
fragmentRef.current.experimental_scrollIntoView(false);
2170+
fragmentRef.current.scrollIntoView(false);
21712171
expectLast(logs,'C');
21722172
});
21732173
});
@@ -2195,14 +2195,14 @@ describe('FragmentRefs', () => {
21952195
siblingBRef.current.scrollIntoView=jest.fn();
21962196

21972197
// Default call
2198-
fragmentRef.current.experimental_scrollIntoView();
2198+
fragmentRef.current.scrollIntoView();
21992199
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22002200
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22012201

22022202
siblingBRef.current.scrollIntoView.mockClear();
22032203

22042204
// alignToTop=true
2205-
fragmentRef.current.experimental_scrollIntoView(true);
2205+
fragmentRef.current.scrollIntoView(true);
22062206
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22072207
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22082208
});
@@ -2239,7 +2239,7 @@ describe('FragmentRefs', () => {
22392239
siblingBRef.current.scrollIntoView=jest.fn();
22402240

22412241
// alignToTop=false
2242-
fragmentRef.current.experimental_scrollIntoView(false);
2242+
fragmentRef.current.scrollIntoView(false);
22432243
expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22442244
expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(0);
22452245
});
@@ -2260,7 +2260,7 @@ describe('FragmentRefs', () => {
22602260
});
22612261

22622262
parentRef.current.scrollIntoView=jest.fn();
2263-
fragmentRef.current.experimental_scrollIntoView();
2263+
fragmentRef.current.scrollIntoView();
22642264
expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
22652265
});
22662266
});

‎packages/shared/ReactFeatureFlags.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ export const transitionLaneExpirationMs = 5000;
145145
*/
146146
exportconstenableInfiniteRenderLoopDetection: boolean=false;
147147

148-
exportconstenableFragmentRefs=__EXPERIMENTAL__;
149-
exportconstenableFragmentRefsScrollIntoView=__EXPERIMENTAL__;
148+
exportconstenableFragmentRefs: boolean=true;
149+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
150150

151151
// -----------------------------------------------------------------------------
152152
// Ready for next major.

‎packages/shared/forks/ReactFeatureFlags.native-oss.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const enableHydrationChangeEvent: boolean = false;
7272
exportconstenableDefaultTransitionIndicator: boolean=false;
7373
exportconstownerStackLimit=1e4;
7474

75-
exportconstenableFragmentRefs: boolean=false;
75+
exportconstenableFragmentRefs: boolean=true;
7676
exportconstenableFragmentRefsScrollIntoView: boolean=false;
7777

7878
// Profiling Only

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export const enableHydrationChangeEvent: boolean = false;
7373
exportconstenableDefaultTransitionIndicator: boolean=false;
7474
exportconstownerStackLimit=1e4;
7575

76-
exportconstenableFragmentRefs: boolean=false;
77-
exportconstenableFragmentRefsScrollIntoView: boolean=false;
76+
exportconstenableFragmentRefs: boolean=true;
77+
exportconstenableFragmentRefsScrollIntoView: boolean=true;
7878

7979
// TODO: This must be in sync with the main ReactFeatureFlags file because
8080
// the Test Renderer's value must be the same as the one used by the

‎scripts/error-codes/codes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -551,5 +551,5 @@
551551
"563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.",
552552
"564": "Unknown command. The debugChannel was not wired up properly.",
553553
"565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
554-
"566": "FragmentInstance.experimental_scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
554+
"566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
555555
}

0 commit comments

Comments
 (0)