\n- `);\n- const rootID = store.getElementIDAtIndex(0);\n- act(() => store.toggleIsCollapsed(rootID, true));\n- expect(store).toMatchInlineSnapshot(`\n- [root]\n- ▸ \n- `);\n- act(() => store.toggleIsCollapsed(rootID, false));\n- expect(store).toMatchInlineSnapshot(`\n- [root]\n- ▾ \n- ▾ \n- ▾ \n- ▾ \n- ▾ \n-

\n- `);\n- const id = store.getElementIDAtIndex(1);\n- act(() => store.toggleIsCollapsed(id, true));\n- expect(store).toMatchInlineSnapshot(`\n- [root]\n- ▾ \n- ▸ \n- `);\n- act(() => store.toggleIsCollapsed(id, false));\n- expect(store).toMatchInlineSnapshot(`\n- [root]\n- ▾ \n- ▾ \n- ▾ \n- ▾ \n- ▾ \n-

\n- `);\n- });\n- }\n it('should support reordering of children', () => {\n const Root = ({children}) => React.createElement('div', null, children);\n const Component = () => React.createElement('div', null);\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactFunctionComponent-test.js b\/packages\/react-dom\/src\/__tests__\/ReactFunctionComponent-test.js\nindex 6a70f22db9..24f97520ec 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactFunctionComponent-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactFunctionComponent-test.js\n@@ -197,223 +197,6 @@ describe('ReactFunctionComponent', () => {\n .rejects.toThrowError();\n });\n \n- \/\/ @gate !enableRefAsProp || !__DEV__\n- it('should warn when given a string ref', async () => {\n- function Indirection(props) {\n- return

{props.children}<\/div>;\n- }\n-\n- class ParentUsingStringRef extends React.Component {\n- render() {\n- return (\n- \n- \n- <\/Indirection>\n- );\n- }\n- }\n-\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- 'Function components cannot be given refs. ' +\n- 'Attempts to access this ref will fail. ' +\n- 'Did you mean to use React.forwardRef()?\\n\\n' +\n- 'Check the render method ' +\n- 'of `ParentUsingStringRef`.\\n' +\n- ' in FunctionComponent (at **)\\n' +\n- ' in div (at **)\\n' +\n- ' in Indirection (at **)\\n' +\n- ' in ParentUsingStringRef (at **)',\n- );\n-\n- \/\/ No additional warnings should be logged\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- });\n-\n- \/\/ @gate !enableRefAsProp || !__DEV__\n- it('should warn when given a function ref', async () => {\n- function Indirection(props) {\n- return

{props.children}<\/div>;\n- }\n-\n- const ref = jest.fn();\n- class ParentUsingFunctionRef extends React.Component {\n- render() {\n- return (\n- \n- \n- <\/Indirection>\n- );\n- }\n- }\n-\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- 'Function components cannot be given refs. ' +\n- 'Attempts to access this ref will fail. ' +\n- 'Did you mean to use React.forwardRef()?\\n\\n' +\n- 'Check the render method ' +\n- 'of `ParentUsingFunctionRef`.\\n' +\n- ' in FunctionComponent (at **)\\n' +\n- ' in div (at **)\\n' +\n- ' in Indirection (at **)\\n' +\n- ' in ParentUsingFunctionRef (at **)',\n- );\n- expect(ref).not.toHaveBeenCalled();\n-\n- \/\/ No additional warnings should be logged\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- });\n-\n- \/\/ @gate !enableRefAsProp || !__DEV__\n- it('deduplicates ref warnings based on element or owner', async () => {\n- \/\/ When owner uses JSX, we can use exact line location to dedupe warnings\n- class AnonymousParentUsingJSX extends React.Component {\n- render() {\n- return {}} \/>;\n- }\n- }\n-\n- let instance1;\n-\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n-\n- await act(() => {\n- root.render(\n- (instance1 = current)} \/>,\n- );\n- });\n- }).toErrorDev('Function components cannot be given refs.');\n- \/\/ Should be deduped (offending element is on the same line):\n- instance1.forceUpdate();\n- \/\/ Should also be deduped (offending element is on the same line):\n- let container = document.createElement('div');\n- let root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n-\n- \/\/ When owner doesn't use JSX, and is anonymous, we warn once per internal instance.\n- class AnonymousParentNotUsingJSX extends React.Component {\n- render() {\n- return React.createElement(FunctionComponent, {\n- name: 'A',\n- ref: () => {},\n- });\n- }\n- }\n-\n- let instance2;\n- await expect(async () => {\n- container = document.createElement('div');\n- root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render(\n- (instance2 = current)} \/>,\n- );\n- });\n- }).toErrorDev('Function components cannot be given refs.');\n- \/\/ Should be deduped (same internal instance, no additional warnings)\n- instance2.forceUpdate();\n- \/\/ Could not be differentiated (since owner is anonymous and no source location)\n- container = document.createElement('div');\n- root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n-\n- \/\/ When owner doesn't use JSX, but is named, we warn once per owner name\n- class NamedParentNotUsingJSX extends React.Component {\n- render() {\n- return React.createElement(FunctionComponent, {\n- name: 'A',\n- ref: () => {},\n- });\n- }\n- }\n- let instance3;\n- await expect(async () => {\n- container = document.createElement('div');\n- root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render(\n- (instance3 = current)} \/>,\n- );\n- });\n- }).toErrorDev('Function components cannot be given refs.');\n- \/\/ Should be deduped (same owner name, no additional warnings):\n- instance3.forceUpdate();\n- \/\/ Should also be deduped (same owner name, no additional warnings):\n- container = document.createElement('div');\n- root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- });\n-\n- \/\/ This guards against a regression caused by clearing the current debug fiber.\n- \/\/ https:\/\/github.com\/facebook\/react\/issues\/10831\n- \/\/ @gate !disableLegacyContext || !__DEV__\n- \/\/ @gate !enableRefAsProp || !__DEV__\n- it('should warn when giving a function ref with context', async () => {\n- function Child() {\n- return null;\n- }\n- Child.contextTypes = {\n- foo: PropTypes.string,\n- };\n-\n- class Parent extends React.Component {\n- static childContextTypes = {\n- foo: PropTypes.string,\n- };\n- getChildContext() {\n- return {\n- foo: 'bar',\n- };\n- }\n- render() {\n- return ;\n- }\n- }\n-\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- 'Function components cannot be given refs. ' +\n- 'Attempts to access this ref will fail. ' +\n- 'Did you mean to use React.forwardRef()?\\n\\n' +\n- 'Check the render method ' +\n- 'of `Parent`.\\n' +\n- ' in Child (at **)\\n' +\n- ' in Parent (at **)',\n- );\n- });\n-\n it('should use correct name in key warning', async () => {\n function Child() {\n return

{[]}<\/div>;\ndiff --git a\/packages\/react-dom\/src\/__tests__\/refs-test.js b\/packages\/react-dom\/src\/__tests__\/refs-test.js\nindex 1b081bff73..80ea8d1e26 100644\n--- a\/packages\/react-dom\/src\/__tests__\/refs-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/refs-test.js\n@@ -369,24 +369,6 @@ describe('ref swapping', () => {\n });\n }).rejects.toThrow('Expected ref to be a function');\n });\n-\n- \/\/ @gate !enableRefAsProp && www\n- it('undefined ref on manually inlined React element triggers error', async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await expect(async () => {\n- await act(() => {\n- root.render({\n- $$typeof: Symbol.for('react.element'),\n- type: 'div',\n- props: {\n- ref: undefined,\n- },\n- key: null,\n- });\n- });\n- }).rejects.toThrow('Expected ref to be a function');\n- });\n });\n \n describe('root level refs', () => {\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex b9454b8ec2..3e95e537e9 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -35,11 +35,7 @@ import {\n ConcurrentRoot,\n LegacyRoot,\n } from 'react-reconciler\/constants';\n-import {\n- enableRefAsProp,\n- disableLegacyMode,\n- disableStringRefs,\n-} from 'shared\/ReactFeatureFlags';\n+import {disableLegacyMode, disableStringRefs} from 'shared\/ReactFeatureFlags';\n \n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n import ReactVersion from 'shared\/ReactVersion';\n@@ -833,7 +829,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n let currentEventPriority = DefaultEventPriority;\n \n function createJSXElementForTestComparison(type, props) {\n- if (__DEV__ && enableRefAsProp) {\n+ if (__DEV__) {\n const element = {\n type: type,\n $$typeof: REACT_ELEMENT_TYPE,\ndiff --git a\/packages\/react-reconciler\/src\/ReactChildFiber.js b\/packages\/react-reconciler\/src\/ReactChildFiber.js\nindex fe92520b1b..96512d9dce 100644\n--- a\/packages\/react-reconciler\/src\/ReactChildFiber.js\n+++ b\/packages\/react-reconciler\/src\/ReactChildFiber.js\n@@ -45,7 +45,6 @@ import {\n } from '.\/ReactWorkTags';\n import isArray from 'shared\/isArray';\n import {\n- enableRefAsProp,\n enableAsyncIterableChildren,\n disableLegacyMode,\n enableOwnerStacks,\n@@ -239,21 +238,6 @@ function validateFragmentProps(\n break;\n }\n }\n-\n- if (!enableRefAsProp && element.ref !== null) {\n- if (fiber === null) {\n- \/\/ For unkeyed root fragments there's no Fiber. We create a fake one just for\n- \/\/ error stack handling.\n- fiber = createFiberFromElement(element, returnFiber.mode, 0);\n- if (__DEV__) {\n- fiber._debugInfo = currentDebugInfo;\n- }\n- fiber.return = returnFiber;\n- }\n- runWithFiberInDEV(fiber, () => {\n- console.error('Invalid attribute `ref` supplied to `React.Fragment`.');\n- });\n- }\n }\n }\n \n@@ -266,27 +250,14 @@ function unwrapThenable(thenable: Thenable): T {\n return trackUsedThenable(thenableState, thenable, index);\n }\n \n-function coerceRef(\n- returnFiber: Fiber,\n- current: Fiber | null,\n- workInProgress: Fiber,\n- element: ReactElement,\n-): void {\n- let ref;\n- if (enableRefAsProp) {\n- \/\/ TODO: This is a temporary, intermediate step. When enableRefAsProp is on,\n- \/\/ we should resolve the `ref` prop during the begin phase of the component\n- \/\/ it's attached to (HostComponent, ClassComponent, etc).\n- const refProp = element.props.ref;\n- ref = refProp !== undefined ? refProp : null;\n- } else {\n- \/\/ Old behavior.\n- ref = element.ref;\n- }\n-\n- \/\/ TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We\n+function coerceRef(workInProgress: Fiber, element: ReactElement): void {\n+ \/\/ TODO: This is a temporary, intermediate step. Now that enableRefAsProp is on,\n+ \/\/ we should resolve the `ref` prop during the begin phase of the component\n+ \/\/ it's attached to (HostComponent, ClassComponent, etc).\n+ const refProp = element.props.ref;\n+ \/\/ TODO: With enableRefAsProp now rolled out, we shouldn't use the `ref` field. We\n \/\/ should always read the ref from the prop.\n- workInProgress.ref = ref;\n+ workInProgress.ref = refProp !== undefined ? refProp : null;\n }\n \n function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {\n@@ -569,7 +540,7 @@ function createChildReconciler(\n ) {\n \/\/ Move based on index\n const existing = useFiber(current, element.props);\n- coerceRef(returnFiber, current, existing, element);\n+ coerceRef(existing, element);\n existing.return = returnFiber;\n if (__DEV__) {\n existing._debugOwner = element._owner;\n@@ -580,7 +551,7 @@ function createChildReconciler(\n }\n \/\/ Insert\n const created = createFiberFromElement(element, returnFiber.mode, lanes);\n- coerceRef(returnFiber, current, created, element);\n+ coerceRef(created, element);\n created.return = returnFiber;\n if (__DEV__) {\n created._debugInfo = currentDebugInfo;\n@@ -693,7 +664,7 @@ function createChildReconciler(\n returnFiber.mode,\n lanes,\n );\n- coerceRef(returnFiber, null, created, newChild);\n+ coerceRef(created, newChild);\n created.return = returnFiber;\n if (__DEV__) {\n const prevDebugInfo = pushDebugInfo(newChild._debugInfo);\n@@ -1684,7 +1655,7 @@ function createChildReconciler(\n ) {\n deleteRemainingChildren(returnFiber, child.sibling);\n const existing = useFiber(child, element.props);\n- coerceRef(returnFiber, child, existing, element);\n+ coerceRef(existing, element);\n existing.return = returnFiber;\n if (__DEV__) {\n existing._debugOwner = element._owner;\n@@ -1722,7 +1693,7 @@ function createChildReconciler(\n return created;\n } else {\n const created = createFiberFromElement(element, returnFiber.mode, lanes);\n- coerceRef(returnFiber, currentFirstChild, created, element);\n+ coerceRef(created, element);\n created.return = returnFiber;\n if (__DEV__) {\n created._debugInfo = currentDebugInfo;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex f4ce6e849b..efb34826c9 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -108,7 +108,6 @@ import {\n enableAsyncActions,\n enablePostpone,\n enableRenderableContext,\n- enableRefAsProp,\n disableLegacyMode,\n disableDefaultPropsExceptForClasses,\n disableStringRefs,\n@@ -125,10 +124,7 @@ import {\n REACT_MEMO_TYPE,\n getIteratorFn,\n } from 'shared\/ReactSymbols';\n-import {\n- getCurrentFiberOwnerNameInDevOrNull,\n- setCurrentFiber,\n-} from '.\/ReactCurrentFiber';\n+import {setCurrentFiber} from '.\/ReactCurrentFiber';\n import {\n resolveFunctionForHotReloading,\n resolveForwardRefForHotReloading,\n@@ -319,7 +315,6 @@ let didWarnAboutBadClass;\n let didWarnAboutContextTypeOnFunctionComponent;\n let didWarnAboutContextTypes;\n let didWarnAboutGetDerivedStateOnFunctionComponent;\n-let didWarnAboutFunctionRefs;\n export let didWarnAboutReassigningProps: boolean;\n let didWarnAboutRevealOrder;\n let didWarnAboutTailOptions;\n@@ -330,7 +325,6 @@ if (__DEV__) {\n didWarnAboutContextTypeOnFunctionComponent = ({}: {[string]: boolean});\n didWarnAboutContextTypes = ({}: {[string]: boolean});\n didWarnAboutGetDerivedStateOnFunctionComponent = ({}: {[string]: boolean});\n- didWarnAboutFunctionRefs = ({}: {[string]: boolean});\n didWarnAboutReassigningProps = false;\n didWarnAboutRevealOrder = ({}: {[empty]: boolean});\n didWarnAboutTailOptions = ({}: {[string]: boolean});\n@@ -416,7 +410,7 @@ function updateForwardRef(\n const ref = workInProgress.ref;\n \n let propsWithoutRef;\n- if (enableRefAsProp && 'ref' in nextProps) {\n+ if ('ref' in nextProps) {\n \/\/ `ref` is just a prop now, but `forwardRef` expects it to not appear in\n \/\/ the props object. This used to happen in the JSX runtime, but now we do\n \/\/ it here.\n@@ -1954,25 +1948,6 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {\n Component.displayName || Component.name || 'Component',\n );\n }\n- if (!enableRefAsProp && workInProgress.ref !== null) {\n- let info = '';\n- const componentName = getComponentNameFromType(Component) || 'Unknown';\n- const ownerName = getCurrentFiberOwnerNameInDevOrNull();\n- if (ownerName) {\n- info += '\\n\\nCheck the render method of `' + ownerName + '`.';\n- }\n-\n- const warningKey = componentName + '|' + (ownerName || '');\n- if (!didWarnAboutFunctionRefs[warningKey]) {\n- didWarnAboutFunctionRefs[warningKey] = true;\n- console.error(\n- 'Function components cannot be given refs. ' +\n- 'Attempts to access this ref will fail. ' +\n- 'Did you mean to use React.forwardRef()?%s',\n- info,\n- );\n- }\n- }\n \n if (\n !disableDefaultPropsExceptForClasses &&\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js b\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js\nindex 79c516eacf..c32525702e 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js\n@@ -23,7 +23,6 @@ import {\n enableDebugTracing,\n enableSchedulingProfiler,\n enableLazyContextPropagation,\n- enableRefAsProp,\n disableDefaultPropsExceptForClasses,\n } from 'shared\/ReactFeatureFlags';\n import ReactStrictModeWarnings from '.\/ReactStrictModeWarnings';\n@@ -1252,14 +1251,12 @@ export function resolveClassComponentProps(\n ): Object {\n let newProps = baseProps;\n \n- if (enableRefAsProp) {\n- \/\/ Remove ref from the props object, if it exists.\n- if ('ref' in baseProps) {\n- newProps = ({}: any);\n- for (const propName in baseProps) {\n- if (propName !== 'ref') {\n- newProps[propName] = baseProps[propName];\n- }\n+ \/\/ Remove ref from the props object, if it exists.\n+ if ('ref' in baseProps) {\n+ newProps = ({}: any);\n+ for (const propName in baseProps) {\n+ if (propName !== 'ref') {\n+ newProps[propName] = baseProps[propName];\n }\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberRefs-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberRefs-test.js\nindex 2a0590af31..8fd5206c94 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberRefs-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberRefs-test.js\n@@ -85,7 +85,6 @@ describe('ReactFiberRefs', () => {\n expect(ref2.current).not.toBe(null);\n });\n \n- \/\/ @gate enableRefAsProp\n \/\/ @gate !disableStringRefs\n it('string ref props are converted to function refs', async () => {\n let refProp;\n@@ -105,7 +104,7 @@ describe('ReactFiberRefs', () => {\n const root = ReactNoop.createRoot();\n await act(() => root.render());\n \n- \/\/ When string refs aren't disabled, and enableRefAsProp is on, string refs\n+ \/\/ When string refs aren't disabled, string refs\n \/\/ the receiving component receives a callback ref, not the original string.\n \/\/ This behavior should never be shipped to open source; it's only here to\n \/\/ allow Meta to keep using string refs temporarily while they finish\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalSideEffects-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalSideEffects-test.js\nindex 37e885cd47..81f892b48e 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalSideEffects-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalSideEffects-test.js\n@@ -1299,20 +1299,7 @@ describe('ReactIncrementalSideEffects', () => {\n \n ReactNoop.render();\n \n- if (gate(flags => flags.enableRefAsProp)) {\n- await waitForAll([]);\n- } else {\n- await expect(async () => await waitForAll([])).toErrorDev(\n- 'Function components cannot be given refs. ' +\n- 'Attempts to access this ref will fail. ' +\n- 'Did you mean to use React.forwardRef()?\\n\\n' +\n- 'Check the render method ' +\n- 'of `Foo`.\\n' +\n- ' in FunctionComponent (at **)\\n' +\n- ' in div (at **)\\n' +\n- ' in Foo (at **)',\n- );\n- }\n+ await waitForAll([]);\n \n expect(ops).toEqual([\n classInstance,\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactLazy-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactLazy-test.internal.js\nindex 8526fb5b19..ddcd751957 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactLazy-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactLazy-test.internal.js\n@@ -1236,30 +1236,6 @@ describe('ReactLazy', () => {\n expect(root).toMatchRenderedOutput('2');\n });\n \n- \/\/ @gate !enableRefAsProp || !__DEV__\n- it('warns about ref on functions for lazy-loaded components', async () => {\n- const Foo = props =>

;\n- const LazyFoo = lazy(() => {\n- return fakeImport(Foo);\n- });\n-\n- const ref = React.createRef();\n- ReactTestRenderer.create(\n- }>\n- \n- <\/Suspense>,\n- {\n- unstable_isConcurrent: true,\n- },\n- );\n-\n- await waitForAll(['Loading...']);\n- await resolveFakeImport(Foo);\n- await expect(async () => {\n- await waitForAll([]);\n- }).toErrorDev('Function components cannot be given refs');\n- });\n-\n it('should error with a component stack naming the resolved component', async () => {\n let componentStackMessage;\n \ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactMemo-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactMemo-test.js\nindex c4d50631ec..5fdf14af4d 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactMemo-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactMemo-test.js\n@@ -44,43 +44,6 @@ describe('memo', () => {\n return {default: result};\n }\n \n- \/\/ @gate !enableRefAsProp || !__DEV__\n- it('warns when giving a ref (simple)', async () => {\n- \/\/ This test lives outside sharedTests because the wrappers don't forward\n- \/\/ refs properly, and they end up affecting the current owner which is used\n- \/\/ by the warning (making the messages not line up).\n- function App() {\n- return null;\n- }\n- App = React.memo(App);\n- function Outer() {\n- return {}} \/>;\n- }\n- ReactNoop.render();\n- await expect(async () => await waitForAll([])).toErrorDev([\n- 'Function components cannot be given refs. Attempts to access ' +\n- 'this ref will fail.',\n- ]);\n- });\n-\n- \/\/ @gate !enableRefAsProp || !__DEV__\n- it('warns when giving a ref (complex)', async () => {\n- function App() {\n- return null;\n- }\n- \/\/ A custom compare function means this won't use SimpleMemoComponent (as of this writing)\n- \/\/ SimpleMemoComponent is unobservable tho, so we can't check :)\n- App = React.memo(App, () => false);\n- function Outer() {\n- return {}} \/>;\n- }\n- ReactNoop.render();\n- await expect(async () => await waitForAll([])).toErrorDev([\n- 'Function components cannot be given refs. Attempts to access ' +\n- 'this ref will fail.',\n- ]);\n- });\n-\n \/\/ Tests should run against both the lazy and non-lazy versions of `memo`.\n \/\/ To make the tests work for both versions, we wrap the non-lazy version in\n \/\/ a lazy function component.\ndiff --git a\/packages\/react-server\/src\/ReactFizzServer.js b\/packages\/react-server\/src\/ReactFizzServer.js\nindex f384908720..7b881fdbe8 100644\n--- a\/packages\/react-server\/src\/ReactFizzServer.js\n+++ b\/packages\/react-server\/src\/ReactFizzServer.js\n@@ -160,7 +160,6 @@ import {\n enablePostpone,\n enableHalt,\n enableRenderableContext,\n- enableRefAsProp,\n disableDefaultPropsExceptForClasses,\n enableAsyncIterableChildren,\n disableStringRefs,\n@@ -1671,14 +1670,12 @@ export function resolveClassComponentProps(\n ): Object {\n let newProps = baseProps;\n \n- if (enableRefAsProp) {\n- \/\/ Remove ref from the props object, if it exists.\n- if ('ref' in baseProps) {\n- newProps = ({}: any);\n- for (const propName in baseProps) {\n- if (propName !== 'ref') {\n- newProps[propName] = baseProps[propName];\n- }\n+ \/\/ Remove ref from the props object, if it exists.\n+ if ('ref' in baseProps) {\n+ newProps = ({}: any);\n+ for (const propName in baseProps) {\n+ if (propName !== 'ref') {\n+ newProps[propName] = baseProps[propName];\n }\n }\n }\n@@ -1973,7 +1970,7 @@ function renderForwardRef(\n ref: any,\n ): void {\n let propsWithoutRef;\n- if (enableRefAsProp && 'ref' in props) {\n+ if ('ref' in props) {\n \/\/ `ref` is just a prop now, but `forwardRef` expects it to not appear in\n \/\/ the props object. This used to happen in the JSX runtime, but now we do\n \/\/ it here.\n@@ -2595,16 +2592,10 @@ function retryNode(request: Request, task: Task): void {\n const key = element.key;\n const props = element.props;\n \n- let ref;\n- if (enableRefAsProp) {\n- \/\/ TODO: This is a temporary, intermediate step. Once the feature\n- \/\/ flag is removed, we should get the ref off the props object right\n- \/\/ before using it.\n- const refProp = props.ref;\n- ref = refProp !== undefined ? refProp : null;\n- } else {\n- ref = element.ref;\n- }\n+ \/\/ TODO: We should get the ref off the props object right before using\n+ \/\/ it.\n+ const refProp = props.ref;\n+ const ref = refProp !== undefined ? refProp : null;\n \n const debugTask: null | ConsoleTask =\n __DEV__ && enableOwnerStacks ? task.debugTask : null;\ndiff --git a\/packages\/react-server\/src\/ReactFlightServer.js b\/packages\/react-server\/src\/ReactFlightServer.js\nindex 75d5947bae..8b69c7a803 100644\n--- a\/packages\/react-server\/src\/ReactFlightServer.js\n+++ b\/packages\/react-server\/src\/ReactFlightServer.js\n@@ -18,7 +18,6 @@ import {\n enablePostpone,\n enableHalt,\n enableTaint,\n- enableRefAsProp,\n enableServerComponentLogs,\n enableOwnerStacks,\n } from 'shared\/ReactFeatureFlags';\n@@ -2512,16 +2511,10 @@ function renderModelDestructive(\n }\n \n const props = element.props;\n- let ref;\n- if (enableRefAsProp) {\n- \/\/ TODO: This is a temporary, intermediate step. Once the feature\n- \/\/ flag is removed, we should get the ref off the props object right\n- \/\/ before using it.\n- const refProp = props.ref;\n- ref = refProp !== undefined ? refProp : null;\n- } else {\n- ref = element.ref;\n- }\n+ \/\/ TODO: We should get the ref off the props object right before using\n+ \/\/ it.\n+ const refProp = props.ref;\n+ const ref = refProp !== undefined ? refProp : null;\n \n \/\/ Attempt to render the Server Component.\n \ndiff --git a\/packages\/react-test-renderer\/src\/__tests__\/ReactTestRenderer-test.internal.js b\/packages\/react-test-renderer\/src\/__tests__\/ReactTestRenderer-test.internal.js\nindex f596183589..551c10fb5f 100644\n--- a\/packages\/react-test-renderer\/src\/__tests__\/ReactTestRenderer-test.internal.js\n+++ b\/packages\/react-test-renderer\/src\/__tests__\/ReactTestRenderer-test.internal.js\n@@ -386,39 +386,6 @@ describe('ReactTestRenderer', () => {\n expect(log).toEqual([null]);\n });\n \n- \/\/ @gate !enableRefAsProp || !__DEV__\n- it('warns correctly for refs on SFCs', async () => {\n- function Bar() {\n- return

Hello, world<\/div>;\n- }\n- class Foo extends React.Component {\n- fooRef = React.createRef();\n- render() {\n- return ;\n- }\n- }\n- class Baz extends React.Component {\n- bazRef = React.createRef();\n- render() {\n- return

;\n- }\n- }\n- await act(() => {\n- ReactTestRenderer.create();\n- });\n- await expect(async () => {\n- await act(() => {\n- ReactTestRenderer.create();\n- });\n- }).toErrorDev(\n- 'Function components cannot be given refs. Attempts ' +\n- 'to access this ref will fail. ' +\n- 'Did you mean to use React.forwardRef()?\\n' +\n- ' in Bar (at **)\\n' +\n- ' in Foo (at **)',\n- );\n- });\n-\n it('allows an optional createNodeMock function', async () => {\n const mockDivInstance = {appendChild: () => {}};\n const mockInputInstance = {focus: () => {}};\n@@ -1226,11 +1193,9 @@ describe('ReactTestRenderer', () => {\n {\n instance: null,\n nodeType: 'host',\n- props: gate(flags => flags.enableRefAsProp)\n- ? {\n- ref: refFn,\n- }\n- : {},\n+ props: {\n+ ref: refFn,\n+ },\n rendered: [],\n type: 'span',\n },\ndiff --git a\/packages\/react\/src\/__tests__\/ReactCreateElement-test.js b\/packages\/react\/src\/__tests__\/ReactCreateElement-test.js\nindex 51012166af..3ab5c34c33 100644\n--- a\/packages\/react\/src\/__tests__\/ReactCreateElement-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactCreateElement-test.js\n@@ -37,11 +37,7 @@ describe('ReactCreateElement', () => {\n const element = React.createElement(ComponentClass);\n expect(element.type).toBe(ComponentClass);\n expect(element.key).toBe(null);\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(element.ref).toBe(null);\n- } else {\n- expect(element.ref).toBe(null);\n- }\n+ expect(element.ref).toBe(null);\n if (__DEV__) {\n expect(Object.isFrozen(element)).toBe(true);\n expect(Object.isFrozen(element.props)).toBe(true);\n@@ -90,45 +86,11 @@ describe('ReactCreateElement', () => {\n );\n });\n \n- \/\/ @gate !enableRefAsProp || !__DEV__\n- it('should warn when `ref` is being accessed', async () => {\n- class Child extends React.Component {\n- render() {\n- return React.createElement('div', null, this.props.ref);\n- }\n- }\n- class Parent extends React.Component {\n- render() {\n- return React.createElement(\n- 'div',\n- null,\n- React.createElement(Child, {ref: React.createRef()}),\n- );\n- }\n- }\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n-\n- await expect(async () => {\n- await act(() => {\n- root.render(React.createElement(Parent));\n- });\n- }).toErrorDev(\n- 'Child: `ref` is not a prop. Trying to access it will result ' +\n- 'in `undefined` being returned. If you need to access the same ' +\n- 'value within the child component, you should pass it as a different ' +\n- 'prop. (https:\/\/react.dev\/link\/special-props)',\n- );\n- });\n-\n it('allows a string to be passed as the type', () => {\n const element = React.createElement('div');\n expect(element.type).toBe('div');\n expect(element.key).toBe(null);\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(element.ref).toBe(null);\n- } else {\n- expect(element.ref).toBe(null);\n- }\n+ expect(element.ref).toBe(null);\n if (__DEV__) {\n expect(Object.isFrozen(element)).toBe(true);\n expect(Object.isFrozen(element.props)).toBe(true);\n@@ -179,20 +141,13 @@ describe('ReactCreateElement', () => {\n foo: '56',\n });\n expect(element.type).toBe(ComponentClass);\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(() => expect(element.ref).toBe(ref)).toErrorDev(\n- 'Accessing element.ref was removed in React 19',\n- {withoutStack: true},\n- );\n- const expectation = {foo: '56', ref};\n- Object.freeze(expectation);\n- expect(element.props).toEqual(expectation);\n- } else {\n- const expectation = {foo: '56'};\n- Object.freeze(expectation);\n- expect(element.props).toEqual(expectation);\n- expect(element.ref).toBe(ref);\n- }\n+ expect(() => expect(element.ref).toBe(ref)).toErrorDev(\n+ 'Accessing element.ref was removed in React 19',\n+ {withoutStack: true},\n+ );\n+ const expectation = {foo: '56', ref};\n+ Object.freeze(expectation);\n+ expect(element.props).toEqual(expectation);\n });\n \n it('extracts null key', () => {\n@@ -218,11 +173,7 @@ describe('ReactCreateElement', () => {\n const element = React.createElement(ComponentClass, props);\n expect(element.type).toBe(ComponentClass);\n expect(element.key).toBe(null);\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(element.ref).toBe(null);\n- } else {\n- expect(element.ref).toBe(null);\n- }\n+ expect(element.ref).toBe(null);\n if (__DEV__) {\n expect(Object.isFrozen(element)).toBe(true);\n expect(Object.isFrozen(element.props)).toBe(true);\n@@ -234,11 +185,7 @@ describe('ReactCreateElement', () => {\n const elementA = React.createElement('div');\n const elementB = React.createElement('div', elementA.props);\n expect(elementB.key).toBe(null);\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(elementB.ref).toBe(null);\n- } else {\n- expect(elementB.ref).toBe(null);\n- }\n+ expect(elementB.ref).toBe(null);\n });\n \n it('coerces the key to a string', () => {\n@@ -248,11 +195,7 @@ describe('ReactCreateElement', () => {\n });\n expect(element.type).toBe(ComponentClass);\n expect(element.key).toBe('12');\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(element.ref).toBe(null);\n- } else {\n- expect(element.ref).toBe(null);\n- }\n+ expect(element.ref).toBe(null);\n if (__DEV__) {\n expect(Object.isFrozen(element)).toBe(true);\n expect(Object.isFrozen(element.props)).toBe(true);\ndiff --git a\/packages\/react\/src\/__tests__\/ReactElementClone-test.js b\/packages\/react\/src\/__tests__\/ReactElementClone-test.js\nindex 1acf56749e..435af8e118 100644\n--- a\/packages\/react\/src\/__tests__\/ReactElementClone-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactElementClone-test.js\n@@ -212,11 +212,7 @@ describe('ReactElementClone', () => {\n ref: this.xyzRef,\n });\n expect(clone.key).toBe('xyz');\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(clone.props.ref).toBe(this.xyzRef);\n- } else {\n- expect(clone.ref).toBe(this.xyzRef);\n- }\n+ expect(clone.props.ref).toBe(this.xyzRef);\n return

{clone}<\/div>;\n }\n }\n@@ -274,17 +270,13 @@ describe('ReactElementClone', () => {\n \n const root = ReactDOMClient.createRoot(document.createElement('div'));\n await act(() => root.render());\n- if (gate(flags => flags.enableRefAsProp && flags.disableStringRefs)) {\n+ if (gate(flags => flags.disableStringRefs)) {\n expect(component.childRef).toEqual({current: null});\n expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');\n- } else if (\n- gate(flags => !flags.enableRefAsProp && !flags.disableStringRefs)\n- ) {\n+ } else if (gate(flags => false)) {\n expect(component.childRef).toEqual({current: null});\n expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');\n- } else if (\n- gate(flags => flags.enableRefAsProp && !flags.disableStringRefs)\n- ) {\n+ } else if (gate(flags => !flags.disableStringRefs)) {\n expect(component.childRef).toEqual({current: null});\n expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');\n } else {\n@@ -397,11 +389,7 @@ describe('ReactElementClone', () => {\n const elementA = React.createElement('div');\n const elementB = React.cloneElement(elementA, elementA.props);\n expect(elementB.key).toBe(null);\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(elementB.ref).toBe(null);\n- } else {\n- expect(elementB.ref).toBe(null);\n- }\n+ expect(elementB.ref).toBe(null);\n });\n \n it('should ignore undefined key and ref', () => {\n@@ -418,21 +406,17 @@ describe('ReactElementClone', () => {\n const clone = React.cloneElement(element, props);\n expect(clone.type).toBe(ComponentClass);\n expect(clone.key).toBe('12');\n- if (gate(flags => flags.enableRefAsProp && flags.disableStringRefs)) {\n+ if (gate(flags => flags.disableStringRefs)) {\n expect(clone.props.ref).toBe('34');\n expect(() => expect(clone.ref).toBe('34')).toErrorDev(\n 'Accessing element.ref was removed in React 19',\n {withoutStack: true},\n );\n expect(clone.props).toEqual({foo: 'ef', ref: '34'});\n- } else if (\n- gate(flags => !flags.enableRefAsProp && !flags.disableStringRefs)\n- ) {\n+ } else if (gate(flags => false)) {\n expect(clone.ref).toBe(element.ref);\n expect(clone.props).toEqual({foo: 'ef'});\n- } else if (\n- gate(flags => flags.enableRefAsProp && !flags.disableStringRefs)\n- ) {\n+ } else if (gate(flags => !flags.disableStringRefs)) {\n expect(() => {\n expect(clone.ref).toBe(element.ref);\n }).toErrorDev('Accessing element.ref was removed in React 19', {\n@@ -462,14 +446,8 @@ describe('ReactElementClone', () => {\n const clone = React.cloneElement(element, props);\n expect(clone.type).toBe(ComponentClass);\n expect(clone.key).toBe('null');\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(clone.ref).toBe(null);\n- expect(clone.props).toEqual({foo: 'ef', ref: null});\n- } else {\n- expect(clone.ref).toBe(null);\n- expect(clone.props).toEqual({foo: 'ef'});\n- }\n-\n+ expect(clone.ref).toBe(null);\n+ expect(clone.props).toEqual({foo: 'ef', ref: null});\n if (__DEV__) {\n expect(Object.isFrozen(element)).toBe(true);\n expect(Object.isFrozen(element.props)).toBe(true);\ndiff --git a\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js b\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js\nindex f827a52bc5..12e54e5c96 100644\n--- a\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js\n@@ -248,23 +248,13 @@ describe('ReactJSXElementValidator', () => {\n }\n }\n \n- if (gate(flags => flags.enableRefAsProp)) {\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev('Invalid prop `ref` supplied to `React.Fragment`.');\n- } else {\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev('Invalid attribute `ref` supplied to `React.Fragment`.');\n- }\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev('Invalid prop `ref` supplied to `React.Fragment`.');\n });\n \n it('does not warn for fragments of multiple elements without keys', async () => {\ndiff --git a\/packages\/react\/src\/__tests__\/ReactJSXRuntime-test.js b\/packages\/react\/src\/__tests__\/ReactJSXRuntime-test.js\nindex 90316cbd70..e3de4dbf5e 100644\n--- a\/packages\/react\/src\/__tests__\/ReactJSXRuntime-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactJSXRuntime-test.js\n@@ -244,34 +244,6 @@ describe('ReactJSXRuntime', () => {\n );\n });\n \n- \/\/ @gate !enableRefAsProp || !__DEV__\n- it('should warn when `ref` is being accessed', async () => {\n- const container = document.createElement('div');\n- class Child extends React.Component {\n- render() {\n- return JSXRuntime.jsx('div', {children: this.props.ref});\n- }\n- }\n- class Parent extends React.Component {\n- render() {\n- return JSXRuntime.jsx('div', {\n- children: JSXRuntime.jsx(Child, {ref: React.createRef()}),\n- });\n- }\n- }\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render(JSXRuntime.jsx(Parent, {}));\n- });\n- }).toErrorDev(\n- 'Child: `ref` is not a prop. Trying to access it will result ' +\n- 'in `undefined` being returned. If you need to access the same ' +\n- 'value within the child component, you should pass it as a different ' +\n- 'prop. (https:\/\/react.dev\/link\/special-props)',\n- );\n- });\n-\n it('should warn when unkeyed children are passed to jsx', async () => {\n const container = document.createElement('div');\n \n@@ -377,7 +349,6 @@ describe('ReactJSXRuntime', () => {\n expect(didCall).toBe(false);\n });\n \n- \/\/ @gate enableRefAsProp\n it('does not clone props object if key and ref is not spread', async () => {\n const config = {\n foo: 'foo',\ndiff --git a\/packages\/react\/src\/__tests__\/ReactJSXTransformIntegration-test.js b\/packages\/react\/src\/__tests__\/ReactJSXTransformIntegration-test.js\nindex 22480f1a7e..f0caf6b494 100644\n--- a\/packages\/react\/src\/__tests__\/ReactJSXTransformIntegration-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactJSXTransformIntegration-test.js\n@@ -55,11 +55,7 @@ describe('ReactJSXTransformIntegration', () => {\n const element = ;\n expect(element.type).toBe(Component);\n expect(element.key).toBe(null);\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(element.ref).toBe(null);\n- } else {\n- expect(element.ref).toBe(null);\n- }\n+ expect(element.ref).toBe(null);\n const expectation = {};\n Object.freeze(expectation);\n expect(element.props).toEqual(expectation);\n@@ -69,11 +65,7 @@ describe('ReactJSXTransformIntegration', () => {\n const element =

;\n expect(element.type).toBe('div');\n expect(element.key).toBe(null);\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(element.ref).toBe(null);\n- } else {\n- expect(element.ref).toBe(null);\n- }\n+ expect(element.ref).toBe(null);\n const expectation = {};\n Object.freeze(expectation);\n expect(element.props).toEqual(expectation);\n@@ -84,11 +76,7 @@ describe('ReactJSXTransformIntegration', () => {\n const element = ;\n expect(element.type).toBe('div');\n expect(element.key).toBe(null);\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(element.ref).toBe(null);\n- } else {\n- expect(element.ref).toBe(null);\n- }\n+ expect(element.ref).toBe(null);\n const expectation = {};\n Object.freeze(expectation);\n expect(element.props).toEqual(expectation);\n@@ -124,31 +112,20 @@ describe('ReactJSXTransformIntegration', () => {\n const ref = React.createRef();\n const element = ;\n expect(element.type).toBe(Component);\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(() => expect(element.ref).toBe(ref)).toErrorDev(\n- 'Accessing element.ref was removed in React 19',\n- {withoutStack: true},\n- );\n- const expectation = {foo: '56', ref};\n- Object.freeze(expectation);\n- expect(element.props).toEqual(expectation);\n- } else {\n- const expectation = {foo: '56'};\n- Object.freeze(expectation);\n- expect(element.props).toEqual(expectation);\n- expect(element.ref).toBe(ref);\n- }\n+ expect(() => expect(element.ref).toBe(ref)).toErrorDev(\n+ 'Accessing element.ref was removed in React 19',\n+ {withoutStack: true},\n+ );\n+ const expectation = {foo: '56', ref};\n+ Object.freeze(expectation);\n+ expect(element.props).toEqual(expectation);\n });\n \n it('coerces the key to a string', () => {\n const element = ;\n expect(element.type).toBe(Component);\n expect(element.key).toBe('12');\n- if (gate(flags => flags.enableRefAsProp)) {\n- expect(element.ref).toBe(null);\n- } else {\n- expect(element.ref).toBe(null);\n- }\n+ expect(element.ref).toBe(null);\n const expectation = {foo: '56'};\n Object.freeze(expectation);\n expect(element.props).toEqual(expectation);\ndiff --git a\/packages\/react\/src\/jsx\/ReactJSXElement.js b\/packages\/react\/src\/jsx\/ReactJSXElement.js\nindex 893806def2..1d1848e341 100644\n--- a\/packages\/react\/src\/jsx\/ReactJSXElement.js\n+++ b\/packages\/react\/src\/jsx\/ReactJSXElement.js\n@@ -20,7 +20,6 @@ import isValidElementType from 'shared\/isValidElementType';\n import isArray from 'shared\/isArray';\n import {describeUnknownElementTypeFrameInDEV} from 'shared\/ReactComponentStackFrame';\n import {\n- enableRefAsProp,\n disableStringRefs,\n disableDefaultPropsExceptForClasses,\n enableOwnerStacks,\n@@ -72,7 +71,6 @@ function getOwner() {\n }\n \n let specialPropKeyWarningShown;\n-let specialPropRefWarningShown;\n let didWarnAboutStringRefs;\n let didWarnAboutElementRef;\n let didWarnAboutOldJSXRuntime;\n@@ -82,7 +80,7 @@ if (__DEV__ || enableLogStringRefsProd) {\n didWarnAboutElementRef = {};\n }\n \n-const enableFastJSXWithoutStringRefs = enableRefAsProp && disableStringRefs;\n+const enableFastJSXWithoutStringRefs = disableStringRefs;\n \n function hasValidRef(config) {\n if (__DEV__) {\n@@ -159,30 +157,6 @@ function defineKeyPropWarningGetter(props, displayName) {\n }\n }\n \n-function defineRefPropWarningGetter(props, displayName) {\n- if (!enableRefAsProp) {\n- if (__DEV__) {\n- const warnAboutAccessingRef = function () {\n- if (!specialPropRefWarningShown) {\n- specialPropRefWarningShown = true;\n- console.error(\n- '%s: `ref` is not a prop. Trying to access it will result ' +\n- 'in `undefined` being returned. If you need to access the same ' +\n- 'value within the child component, you should pass it as a different ' +\n- 'prop. (https:\/\/react.dev\/link\/special-props)',\n- displayName,\n- );\n- }\n- };\n- warnAboutAccessingRef.isReactWarning = true;\n- Object.defineProperty(props, 'ref', {\n- get: warnAboutAccessingRef,\n- configurable: true,\n- });\n- }\n- }\n-}\n-\n function elementRefGetterWithDeprecationWarning() {\n if (__DEV__) {\n const componentName = getComponentNameFromType(this.type);\n@@ -225,7 +199,6 @@ function elementRefGetterWithDeprecationWarning() {\n function ReactElement(\n type,\n key,\n- _ref,\n self,\n source,\n owner,\n@@ -233,24 +206,18 @@ function ReactElement(\n debugStack,\n debugTask,\n ) {\n- let ref;\n- if (enableRefAsProp) {\n- \/\/ When enableRefAsProp is on, ignore whatever was passed as the ref\n- \/\/ argument and treat `props.ref` as the source of truth. The only thing we\n- \/\/ use this for is `element.ref`, which will log a deprecation warning on\n- \/\/ access. In the next release, we can remove `element.ref` as well as the\n- \/\/ `ref` argument.\n- const refProp = props.ref;\n+ \/\/ Ignore whatever was passed as the ref argument and treat `props.ref` as\n+ \/\/ the source of truth. The only thing we use this for is `element.ref`,\n+ \/\/ which will log a deprecation warning on access. In the next release, we\n+ \/\/ can remove `element.ref` as well as the `ref` argument.\n+ const refProp = props.ref;\n \n- \/\/ An undefined `element.ref` is coerced to `null` for\n- \/\/ backwards compatibility.\n- ref = refProp !== undefined ? refProp : null;\n- } else {\n- ref = _ref;\n- }\n+ \/\/ An undefined `element.ref` is coerced to `null` for\n+ \/\/ backwards compatibility.\n+ const ref = refProp !== undefined ? refProp : null;\n \n let element;\n- if (__DEV__ && enableRefAsProp) {\n+ if (__DEV__) {\n \/\/ In dev, make `ref` a non-enumerable property with a warning. It's non-\n \/\/ enumerable so that test matchers and serializers don't access it and\n \/\/ trigger the warning.\n@@ -380,7 +347,6 @@ function ReactElement(\n *\/\n export function jsxProd(type, config, maybeKey) {\n let key = null;\n- let ref = null;\n \n \/\/ Currently, key can be spread in as a prop. This causes a potential\n \/\/ issue if key is also explicitly declared (ie.

\n@@ -402,19 +368,9 @@ export function jsxProd(type, config, maybeKey) {\n key = '' + config.key;\n }\n \n- if (hasValidRef(config)) {\n- if (!enableRefAsProp) {\n- ref = config.ref;\n- if (!disableStringRefs) {\n- ref = coerceStringRef(ref, getOwner(), type);\n- }\n- }\n- }\n-\n let props;\n if (\n- (enableFastJSXWithoutStringRefs ||\n- (enableRefAsProp && !('ref' in config))) &&\n+ (enableFastJSXWithoutStringRefs || !('ref' in config)) &&\n !('key' in config)\n ) {\n \/\/ If key was not spread in, we can reuse the original props object. This\n@@ -434,8 +390,8 @@ export function jsxProd(type, config, maybeKey) {\n props = {};\n for (const propName in config) {\n \/\/ Skip over reserved prop names\n- if (propName !== 'key' && (enableRefAsProp || propName !== 'ref')) {\n- if (enableRefAsProp && !disableStringRefs && propName === 'ref') {\n+ if (propName !== 'key') {\n+ if (!disableStringRefs && propName === 'ref') {\n props.ref = coerceStringRef(config[propName], getOwner(), type);\n } else {\n props[propName] = config[propName];\n@@ -459,7 +415,6 @@ export function jsxProd(type, config, maybeKey) {\n return ReactElement(\n type,\n key,\n- ref,\n undefined,\n undefined,\n getOwner(),\n@@ -662,7 +617,6 @@ function jsxDEVImpl(\n }\n \n let key = null;\n- let ref = null;\n \n \/\/ Currently, key can be spread in as a prop. This causes a potential\n \/\/ issue if key is also explicitly declared (ie.

\n@@ -684,22 +638,15 @@ function jsxDEVImpl(\n key = '' + config.key;\n }\n \n- if (hasValidRef(config)) {\n- if (!enableRefAsProp) {\n- ref = config.ref;\n- if (!disableStringRefs) {\n- ref = coerceStringRef(ref, getOwner(), type);\n- }\n- }\n- if (!disableStringRefs) {\n+ if (!disableStringRefs) {\n+ if (hasValidRef(config)) {\n warnIfStringRefCannotBeAutoConverted(config, self);\n }\n }\n \n let props;\n if (\n- (enableFastJSXWithoutStringRefs ||\n- (enableRefAsProp && !('ref' in config))) &&\n+ (enableFastJSXWithoutStringRefs || !('ref' in config)) &&\n !('key' in config)\n ) {\n \/\/ If key was not spread in, we can reuse the original props object. This\n@@ -719,8 +666,8 @@ function jsxDEVImpl(\n props = {};\n for (const propName in config) {\n \/\/ Skip over reserved prop names\n- if (propName !== 'key' && (enableRefAsProp || propName !== 'ref')) {\n- if (enableRefAsProp && !disableStringRefs && propName === 'ref') {\n+ if (propName !== 'key') {\n+ if (!disableStringRefs && propName === 'ref') {\n props.ref = coerceStringRef(config[propName], getOwner(), type);\n } else {\n props[propName] = config[propName];\n@@ -741,23 +688,17 @@ function jsxDEVImpl(\n }\n }\n \n- if (key || (!enableRefAsProp && ref)) {\n+ if (key) {\n const displayName =\n typeof type === 'function'\n ? type.displayName || type.name || 'Unknown'\n : type;\n- if (key) {\n- defineKeyPropWarningGetter(props, displayName);\n- }\n- if (!enableRefAsProp && ref) {\n- defineRefPropWarningGetter(props, displayName);\n- }\n+ defineKeyPropWarningGetter(props, displayName);\n }\n \n return ReactElement(\n type,\n key,\n- ref,\n self,\n source,\n getOwner(),\n@@ -838,7 +779,6 @@ export function createElement(type, config, children) {\n const props = {};\n \n let key = null;\n- let ref = null;\n \n if (config != null) {\n if (__DEV__) {\n@@ -861,15 +801,8 @@ export function createElement(type, config, children) {\n }\n }\n \n- if (hasValidRef(config)) {\n- if (!enableRefAsProp) {\n- ref = config.ref;\n- if (!disableStringRefs) {\n- ref = coerceStringRef(ref, getOwner(), type);\n- }\n- }\n-\n- if (__DEV__ && !disableStringRefs) {\n+ if (__DEV__ && !disableStringRefs) {\n+ if (hasValidRef(config)) {\n warnIfStringRefCannotBeAutoConverted(config, config.__self);\n }\n }\n@@ -886,7 +819,6 @@ export function createElement(type, config, children) {\n hasOwnProperty.call(config, propName) &&\n \/\/ Skip over reserved prop names\n propName !== 'key' &&\n- (enableRefAsProp || propName !== 'ref') &&\n \/\/ Even though we don't use these anymore in the runtime, we don't want\n \/\/ them to appear as props, so in createElement we filter them out.\n \/\/ We don't have to do this in the jsx() runtime because the jsx()\n@@ -894,7 +826,7 @@ export function createElement(type, config, children) {\n propName !== '__self' &&\n propName !== '__source'\n ) {\n- if (enableRefAsProp && !disableStringRefs && propName === 'ref') {\n+ if (!disableStringRefs && propName === 'ref') {\n props.ref = coerceStringRef(config[propName], getOwner(), type);\n } else {\n props[propName] = config[propName];\n@@ -931,24 +863,18 @@ export function createElement(type, config, children) {\n }\n }\n if (__DEV__) {\n- if (key || (!enableRefAsProp && ref)) {\n+ if (key) {\n const displayName =\n typeof type === 'function'\n ? type.displayName || type.name || 'Unknown'\n : type;\n- if (key) {\n- defineKeyPropWarningGetter(props, displayName);\n- }\n- if (!enableRefAsProp && ref) {\n- defineRefPropWarningGetter(props, displayName);\n- }\n+ defineKeyPropWarningGetter(props, displayName);\n }\n }\n \n return ReactElement(\n type,\n key,\n- ref,\n undefined,\n undefined,\n getOwner(),\n@@ -962,9 +888,6 @@ export function cloneAndReplaceKey(oldElement, newKey) {\n const clonedElement = ReactElement(\n oldElement.type,\n newKey,\n- \/\/ When enableRefAsProp is on, this argument is ignored. This check only\n- \/\/ exists to avoid the `ref` access warning.\n- enableRefAsProp ? null : oldElement.ref,\n undefined,\n undefined,\n !__DEV__ && disableStringRefs ? undefined : oldElement._owner,\n@@ -997,7 +920,6 @@ export function cloneElement(element, config, children) {\n \n \/\/ Reserved names are extracted\n let key = element.key;\n- let ref = enableRefAsProp ? null : element.ref;\n \n \/\/ Owner will be preserved, unless ref is overridden\n let owner = !__DEV__ && disableStringRefs ? undefined : element._owner;\n@@ -1005,13 +927,6 @@ export function cloneElement(element, config, children) {\n if (config != null) {\n if (hasValidRef(config)) {\n owner = __DEV__ || !disableStringRefs ? getOwner() : undefined;\n- if (!enableRefAsProp) {\n- \/\/ Silently steal the ref from the parent.\n- ref = config.ref;\n- if (!disableStringRefs) {\n- ref = coerceStringRef(ref, owner, element.type);\n- }\n- }\n }\n if (hasValidKey(config)) {\n if (__DEV__) {\n@@ -1034,7 +949,6 @@ export function cloneElement(element, config, children) {\n hasOwnProperty.call(config, propName) &&\n \/\/ Skip over reserved prop names\n propName !== 'key' &&\n- (enableRefAsProp || propName !== 'ref') &&\n \/\/ ...and maybe these, too, though we currently rely on them for\n \/\/ warnings and debug information in dev. Need to decide if we're OK\n \/\/ with dropping them. In the jsx() runtime it's not an issue because\n@@ -1046,7 +960,7 @@ export function cloneElement(element, config, children) {\n \/\/ Undefined `ref` is ignored by cloneElement. We treat it the same as\n \/\/ if the property were missing. This is mostly for\n \/\/ backwards compatibility.\n- !(enableRefAsProp && propName === 'ref' && config.ref === undefined)\n+ !(propName === 'ref' && config.ref === undefined)\n ) {\n if (\n !disableDefaultPropsExceptForClasses &&\n@@ -1056,7 +970,7 @@ export function cloneElement(element, config, children) {\n \/\/ Resolve default props\n props[propName] = defaultProps[propName];\n } else {\n- if (enableRefAsProp && !disableStringRefs && propName === 'ref') {\n+ if (!disableStringRefs && propName === 'ref') {\n props.ref = coerceStringRef(config[propName], owner, element.type);\n } else {\n props[propName] = config[propName];\n@@ -1082,7 +996,6 @@ export function cloneElement(element, config, children) {\n const clonedElement = ReactElement(\n element.type,\n key,\n- ref,\n undefined,\n undefined,\n owner,\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex 5a11217452..a0722c3138 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -208,13 +208,8 @@ export const enableFilterEmptyStringAttributesDOM = true;\n \/\/ Disabled caching behavior of `react\/cache` in client runtimes.\n export const disableClientCache = true;\n \n-\/\/ Subtle breaking changes to JSX runtime to make it faster, like passing `ref`\n-\/\/ as a normal prop instead of stripping it from the props object.\n-\n-\/\/ Passes `ref` as a normal prop instead of stripping it from the props object\n-\/\/ during element creation.\n-export const enableRefAsProp = true;\n export const disableStringRefs = true;\n+\n \/**\n * If set to a function, the function will be called with the component name\n * and ref string.\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex de6ee64caa..b4339c50a5 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -73,7 +73,6 @@ export const enableProfilerCommitHooks = __PROFILE__;\n export const enableProfilerNestedUpdatePhase = __PROFILE__;\n export const enableProfilerTimer = __PROFILE__;\n export const enableReactTestRendererWarning = false;\n-export const enableRefAsProp = true;\n export const enableRenderableContext = true;\n export const enableRetryLaneExpiration = false;\n export const enableSchedulingProfiler = __PROFILE__;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex 7b5e29a8fc..ea670690a5 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -63,7 +63,6 @@ export const enableOwnerStacks = false;\n export const enablePersistedModeClonedFlag = false;\n export const enablePostpone = false;\n export const enableReactTestRendererWarning = false;\n-export const enableRefAsProp = true;\n export const enableRenderableContext = true;\n export const enableRetryLaneExpiration = false;\n export const enableSchedulingProfiler = __PROFILE__;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex 2fe7b8a19a..2eb241af6c 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -91,7 +91,6 @@ export const enableSiblingPrerendering = false;\n \/\/ We really need to get rid of this whole module. Any test renderer specific\n \/\/ flags should be handled by the Fiber config.\n \/\/ const __NEXT_MAJOR__ = __EXPERIMENTAL__;\n-export const enableRefAsProp = true;\n export const disableStringRefs = true;\n export const disableLegacyMode = true;\n export const disableLegacyContext = true;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native-fb.js\nindex ae2f868e1d..1d505aaf56 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native-fb.js\n@@ -56,7 +56,6 @@ export const enableProfilerCommitHooks = __PROFILE__;\n export const enableProfilerNestedUpdatePhase = __PROFILE__;\n export const enableProfilerTimer = __PROFILE__;\n export const enableReactTestRendererWarning = false;\n-export const enableRefAsProp = true;\n export const enableRenderableContext = true;\n export const enableRetryLaneExpiration = false;\n export const enableSchedulingProfiler = __PROFILE__;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex 7d9c3818c8..5c836b48fe 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -83,7 +83,6 @@ export const disableClientCache = true;\n export const enableServerComponentLogs = true;\n export const enableInfiniteRenderLoopDetection = false;\n \n-export const enableRefAsProp = true;\n export const disableStringRefs = false;\n \n export const enableReactTestRendererWarning = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex ec572d86f5..b86394ecf7 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -101,8 +101,6 @@ export const enableLegacyHidden = true;\n \n export const enableComponentStackLocations = true;\n \n-export const enableRefAsProp = true;\n-\n export const disableTextareaChildren = __EXPERIMENTAL__;\n \n export const consoleManagedByDevToolsDuringStrictMode = true;\n"}

dillon1000/react

Files changed