diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.js b/packages/react-reconciler/src/ReactFiberClassComponent.js index 6bf04da4b41b6..037749f836d76 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.js @@ -19,12 +19,13 @@ import { } from './ReactFiberFlags'; import { debugRenderPhaseSideEffectsForStrictMode, + disableDefaultPropsExceptForClasses, disableLegacyContext, + disableStringRefs, enableDebugTracing, - enableSchedulingProfiler, enableLazyContextPropagation, enableRefAsProp, - disableDefaultPropsExceptForClasses, + enableSchedulingProfiler, } from 'shared/ReactFeatureFlags'; import ReactStrictModeWarnings from './ReactStrictModeWarnings'; import {isMounted} from './ReactFiberTreeReflection'; @@ -819,7 +820,12 @@ function mountClassInstance( const instance = workInProgress.stateNode; instance.props = newProps; instance.state = workInProgress.memoizedState; - instance.refs = {}; + if (!disableStringRefs) { + // When string refs are used in create-react-class legacy components, + // we need to make refs writable unless we patch all such copies of the + // class code that sets to a frozen emptyObject. + instance.refs = {}; + } initializeUpdateQueue(workInProgress); diff --git a/packages/react-reconciler/src/__tests__/ReactFiberRefs-test.js b/packages/react-reconciler/src/__tests__/ReactFiberRefs-test.js index e46387d8cc7dd..175c849d94710 100644 --- a/packages/react-reconciler/src/__tests__/ReactFiberRefs-test.js +++ b/packages/react-reconciler/src/__tests__/ReactFiberRefs-test.js @@ -138,4 +138,28 @@ describe('ReactFiberRefs', () => { ); expect(refProp).toBe('child'); }); + + test('strings refs can be codemodded to callback refs', async () => { + let app; + class App extends React.Component { + render() { + app = this; + return ( +