Skip to content

Commit a05ee5d

Browse files
committed
[compiler] Show a ref name hint when assigning to non-ref in a callback (facebook#34298)
In facebook#34125 I added a hint where if you assign to the .current property of a frozen object, we suggest naming the variable as `ref` or `-Ref`. However, the tracking for mutations that assign to .current specifically wasn't propagated past function expression boundaries, which meant that the hint only showed up if you mutated the ref in the main body of the component/hook. That's less likely to happen since most folks know not to access refs in render. What's more likely is that you'll (correctly) assign a ref in an effect or callback, but the compiler will throw an error. By showing a hint in this case we can help people understand the naming pattern. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34298). * facebook#34276 * __->__ facebook#34298 DiffTrain build for [8d7b5e4](facebook@8d7b5e4)
1 parent f59aa02 commit a05ee5d

26 files changed

+1229
-623
lines changed

compiled-rn/VERSION_NATIVE_FB

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
19.2.0-native-fb-4123f6b7-20250826
1+
19.2.0-native-fb-8d7b5e49-20250827

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-dev.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<7bd0ab239879413069fef8a7242c34ca>>
10+
* @generated SignedSource<<2c0185bc29af53faf0204cc229b5c802>>
1111
*/
1212

1313
"use strict";
@@ -404,5 +404,5 @@ __DEV__ &&
404404
exports.useFormStatus = function () {
405405
return resolveDispatcher().useHostTransitionStatus();
406406
};
407-
exports.version = "19.2.0-native-fb-4123f6b7-20250826";
407+
exports.version = "19.2.0-native-fb-8d7b5e49-20250827";
408408
})();

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-prod.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<30e6f2325467907f88fa57c6e5098700>>
10+
* @generated SignedSource<<d0661610b79f5a25001829bf91e740b7>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.2.0-native-fb-4123f6b7-20250826";
206+
exports.version = "19.2.0-native-fb-8d7b5e49-20250827";

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-profiling.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<30e6f2325467907f88fa57c6e5098700>>
10+
* @generated SignedSource<<d0661610b79f5a25001829bf91e740b7>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.2.0-native-fb-4123f6b7-20250826";
206+
exports.version = "19.2.0-native-fb-8d7b5e49-20250827";

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-dev.js

Lines changed: 228 additions & 153 deletions
Large diffs are not rendered by default.

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-prod.js

Lines changed: 121 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<e1017820f9b9a45ed260972638bc0b4b>>
10+
* @generated SignedSource<<690532ae42ed1cc2c8dfd1d238650f6e>>
1111
*/
1212

1313
/*
@@ -40,7 +40,9 @@ var alwaysThrottleRetries = dynamicFlagsUntyped.alwaysThrottleRetries,
4040
enablePersistedModeClonedFlag =
4141
dynamicFlagsUntyped.enablePersistedModeClonedFlag,
4242
renameElementSymbol = dynamicFlagsUntyped.renameElementSymbol,
43-
enableFragmentRefs = dynamicFlagsUntyped.enableFragmentRefs;
43+
enableFragmentRefs = dynamicFlagsUntyped.enableFragmentRefs,
44+
enableFragmentRefsScrollIntoView =
45+
dynamicFlagsUntyped.enableFragmentRefsScrollIntoView;
4446
function isValidContainer(node) {
4547
return !(
4648
!node ||
@@ -190,6 +192,28 @@ function getFragmentParentHostFiber(fiber) {
190192
}
191193
return null;
192194
}
195+
function findFragmentInstanceSiblings(result, self, child) {
196+
for (
197+
var foundSelf =
198+
3 < arguments.length && void 0 !== arguments[3] ? arguments[3] : !1;
199+
null !== child;
200+
201+
) {
202+
if (child === self)
203+
if (((foundSelf = !0), child.sibling)) child = child.sibling;
204+
else return !0;
205+
if (5 === child.tag) {
206+
if (foundSelf) return (result[1] = child), !0;
207+
result[0] = child;
208+
} else if (
209+
(22 !== child.tag || null === child.memoizedState) &&
210+
findFragmentInstanceSiblings(result, self, child.child, foundSelf)
211+
)
212+
return !0;
213+
child = child.sibling;
214+
}
215+
return !1;
216+
}
193217
function getInstanceFromHostFiber(fiber) {
194218
switch (fiber.tag) {
195219
case 5:
@@ -12992,20 +13016,20 @@ function debounceScrollEnd(targetInst, nativeEvent, nativeEventTarget) {
1299213016
(nativeEventTarget[internalScrollTimer] = targetInst));
1299313017
}
1299413018
for (
12995-
var i$jscomp$inline_1627 = 0;
12996-
i$jscomp$inline_1627 < simpleEventPluginEvents.length;
12997-
i$jscomp$inline_1627++
13019+
var i$jscomp$inline_1628 = 0;
13020+
i$jscomp$inline_1628 < simpleEventPluginEvents.length;
13021+
i$jscomp$inline_1628++
1299813022
) {
12999-
var eventName$jscomp$inline_1628 =
13000-
simpleEventPluginEvents[i$jscomp$inline_1627],
13001-
domEventName$jscomp$inline_1629 =
13002-
eventName$jscomp$inline_1628.toLowerCase(),
13003-
capitalizedEvent$jscomp$inline_1630 =
13004-
eventName$jscomp$inline_1628[0].toUpperCase() +
13005-
eventName$jscomp$inline_1628.slice(1);
13023+
var eventName$jscomp$inline_1629 =
13024+
simpleEventPluginEvents[i$jscomp$inline_1628],
13025+
domEventName$jscomp$inline_1630 =
13026+
eventName$jscomp$inline_1629.toLowerCase(),
13027+
capitalizedEvent$jscomp$inline_1631 =
13028+
eventName$jscomp$inline_1629[0].toUpperCase() +
13029+
eventName$jscomp$inline_1629.slice(1);
1300613030
registerSimpleEvent(
13007-
domEventName$jscomp$inline_1629,
13008-
"on" + capitalizedEvent$jscomp$inline_1630
13031+
domEventName$jscomp$inline_1630,
13032+
"on" + capitalizedEvent$jscomp$inline_1631
1300913033
);
1301013034
}
1301113035
registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -15006,6 +15030,36 @@ function removeEventListenerFromChild(
1500615030
);
1500715031
return !1;
1500815032
}
15033+
function normalizeListenerOptions(opts) {
15034+
return null == opts
15035+
? "0"
15036+
: "boolean" === typeof opts
15037+
? "c=" + (opts ? "1" : "0")
15038+
: "c=" +
15039+
(opts.capture ? "1" : "0") +
15040+
"&o=" +
15041+
(opts.once ? "1" : "0") +
15042+
"&p=" +
15043+
(opts.passive ? "1" : "0");
15044+
}
15045+
function indexOfEventListener(
15046+
eventListeners,
15047+
type,
15048+
listener,
15049+
optionsOrUseCapture
15050+
) {
15051+
for (var i = 0; i < eventListeners.length; i++) {
15052+
var item = eventListeners[i];
15053+
if (
15054+
item.type === type &&
15055+
item.listener === listener &&
15056+
normalizeListenerOptions(item.optionsOrUseCapture) ===
15057+
normalizeListenerOptions(optionsOrUseCapture)
15058+
)
15059+
return i;
15060+
}
15061+
return -1;
15062+
}
1500915063
FragmentInstance.prototype.dispatchEvent = function (event) {
1501015064
var parentHostFiber = getFragmentParentHostFiber(this._fragmentFiber);
1501115065
if (null === parentHostFiber) return !0;
@@ -15336,36 +15390,44 @@ function validateDocumentPositionWithFiberTree(
1533615390
fragmentFiber)
1533715391
: !1;
1533815392
}
15339-
function normalizeListenerOptions(opts) {
15340-
return null == opts
15341-
? "0"
15342-
: "boolean" === typeof opts
15343-
? "c=" + (opts ? "1" : "0")
15344-
: "c=" +
15345-
(opts.capture ? "1" : "0") +
15346-
"&o=" +
15347-
(opts.once ? "1" : "0") +
15348-
"&p=" +
15349-
(opts.passive ? "1" : "0");
15350-
}
15351-
function indexOfEventListener(
15352-
eventListeners,
15353-
type,
15354-
listener,
15355-
optionsOrUseCapture
15356-
) {
15357-
for (var i = 0; i < eventListeners.length; i++) {
15358-
var item = eventListeners[i];
15359-
if (
15360-
item.type === type &&
15361-
item.listener === listener &&
15362-
normalizeListenerOptions(item.optionsOrUseCapture) ===
15363-
normalizeListenerOptions(optionsOrUseCapture)
15364-
)
15365-
return i;
15366-
}
15367-
return -1;
15368-
}
15393+
enableFragmentRefsScrollIntoView &&
15394+
(FragmentInstance.prototype.experimental_scrollIntoView = function (
15395+
alignToTop
15396+
) {
15397+
if ("object" === typeof alignToTop)
15398+
throw Error(formatProdErrorMessage(566));
15399+
var children = [];
15400+
traverseVisibleHostChildren(
15401+
this._fragmentFiber.child,
15402+
!1,
15403+
collectChildren,
15404+
children,
15405+
void 0,
15406+
void 0
15407+
);
15408+
var resolvedAlignToTop = !1 !== alignToTop;
15409+
if (0 === children.length) {
15410+
children = this._fragmentFiber;
15411+
var result = [null, null],
15412+
parentHostFiber = getFragmentParentHostFiber(children);
15413+
null !== parentHostFiber &&
15414+
findFragmentInstanceSiblings(result, children, parentHostFiber.child);
15415+
resolvedAlignToTop = resolvedAlignToTop
15416+
? result[1] ||
15417+
result[0] ||
15418+
getFragmentParentHostFiber(this._fragmentFiber)
15419+
: result[0] || result[1];
15420+
null !== resolvedAlignToTop &&
15421+
getInstanceFromHostFiber(resolvedAlignToTop).scrollIntoView(alignToTop);
15422+
} else
15423+
for (
15424+
result = resolvedAlignToTop ? children.length - 1 : 0;
15425+
result !== (resolvedAlignToTop ? -1 : children.length);
15426+
15427+
)
15428+
getInstanceFromHostFiber(children[result]).scrollIntoView(alignToTop),
15429+
(result += resolvedAlignToTop ? -1 : 1);
15430+
});
1536915431
function commitNewChildToFragmentInstance(childInstance, fragmentInstance) {
1537015432
var eventListeners = fragmentInstance._eventListeners;
1537115433
if (null !== eventListeners)
@@ -17194,16 +17256,16 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1719417256
0 === i && attemptExplicitHydrationTarget(target);
1719517257
}
1719617258
};
17197-
var isomorphicReactPackageVersion$jscomp$inline_2023 = React.version;
17259+
var isomorphicReactPackageVersion$jscomp$inline_2034 = React.version;
1719817260
if (
17199-
"19.2.0-native-fb-4123f6b7-20250826" !==
17200-
isomorphicReactPackageVersion$jscomp$inline_2023
17261+
"19.2.0-native-fb-8d7b5e49-20250827" !==
17262+
isomorphicReactPackageVersion$jscomp$inline_2034
1720117263
)
1720217264
throw Error(
1720317265
formatProdErrorMessage(
1720417266
527,
17205-
isomorphicReactPackageVersion$jscomp$inline_2023,
17206-
"19.2.0-native-fb-4123f6b7-20250826"
17267+
isomorphicReactPackageVersion$jscomp$inline_2034,
17268+
"19.2.0-native-fb-8d7b5e49-20250827"
1720717269
)
1720817270
);
1720917271
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -17223,24 +17285,24 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1722317285
null === componentOrElement ? null : componentOrElement.stateNode;
1722417286
return componentOrElement;
1722517287
};
17226-
var internals$jscomp$inline_2554 = {
17288+
var internals$jscomp$inline_2565 = {
1722717289
bundleType: 0,
17228-
version: "19.2.0-native-fb-4123f6b7-20250826",
17290+
version: "19.2.0-native-fb-8d7b5e49-20250827",
1722917291
rendererPackageName: "react-dom",
1723017292
currentDispatcherRef: ReactSharedInternals,
17231-
reconcilerVersion: "19.2.0-native-fb-4123f6b7-20250826"
17293+
reconcilerVersion: "19.2.0-native-fb-8d7b5e49-20250827"
1723217294
};
1723317295
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
17234-
var hook$jscomp$inline_2555 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
17296+
var hook$jscomp$inline_2566 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
1723517297
if (
17236-
!hook$jscomp$inline_2555.isDisabled &&
17237-
hook$jscomp$inline_2555.supportsFiber
17298+
!hook$jscomp$inline_2566.isDisabled &&
17299+
hook$jscomp$inline_2566.supportsFiber
1723817300
)
1723917301
try {
17240-
(rendererID = hook$jscomp$inline_2555.inject(
17241-
internals$jscomp$inline_2554
17302+
(rendererID = hook$jscomp$inline_2566.inject(
17303+
internals$jscomp$inline_2565
1724217304
)),
17243-
(injectedHook = hook$jscomp$inline_2555);
17305+
(injectedHook = hook$jscomp$inline_2566);
1724417306
} catch (err) {}
1724517307
}
1724617308
exports.createRoot = function (container, options) {
@@ -17326,4 +17388,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1732617388
listenToAllSupportedEvents(container);
1732717389
return new ReactDOMHydrationRoot(initialChildren);
1732817390
};
17329-
exports.version = "19.2.0-native-fb-4123f6b7-20250826";
17391+
exports.version = "19.2.0-native-fb-8d7b5e49-20250827";

0 commit comments

Comments
 (0)