Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Support writing to this.refs from userspace
Previously, the `refs` property of a class component instance was read-only by user code — only React could write to it, and until/unless a string ref was used, it pointed to a shared empty object that was frozen in dev to prevent userspace mutations. Because string refs are deprecated, we want users to be able to codemod all their string refs to callback refs. The safest way to do this is to output a callback ref that assigns to `this.refs`. So to support this, we need to make `this.refs` writable by userspace.
- Loading branch information
Showing
5 changed files
with
78 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
packages/react-reconciler/src/__tests__/ReactFiberRefs-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @emails react-core | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| let React; | ||
| let ReactNoop; | ||
| let act; | ||
|
|
||
| describe('ReactFiberRefs', () => { | ||
| beforeEach(() => { | ||
| jest.resetModules(); | ||
| React = require('react'); | ||
| ReactNoop = require('react-noop-renderer'); | ||
| act = require('jest-react').act; | ||
| }); | ||
|
|
||
| test('strings refs can be codemodded to callback refs', async () => { | ||
| let app; | ||
| class App extends React.Component { | ||
| render() { | ||
| app = this; | ||
| return ( | ||
| <div | ||
| prop="Hello!" | ||
| ref={el => { | ||
| // `refs` used to be a shared frozen object unless/until a string | ||
| // ref attached by the reconciler, but it's not anymore so that we | ||
| // can codemod string refs to userspace callback refs. | ||
| this.refs.div = el; | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| const root = ReactNoop.createRoot(); | ||
| await act(async () => root.render(<App />)); | ||
| expect(app.refs.div.prop).toBe('Hello!'); | ||
| }); | ||
|
|
||
| test('class refs are initialized to a frozen shared object', async () => { | ||
| const refsCollection = new Set(); | ||
| class Component extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| refsCollection.add(this.refs); | ||
| } | ||
| render() { | ||
| return <div />; | ||
| } | ||
| } | ||
|
|
||
| const root = ReactNoop.createRoot(); | ||
| await act(() => | ||
| root.render( | ||
| <> | ||
| <Component /> | ||
| <Component /> | ||
| </>, | ||
| ), | ||
| ); | ||
|
|
||
| expect(refsCollection.size).toBe(1); | ||
| const refsInstance = Array.from(refsCollection)[0]; | ||
| expect(Object.isFrozen(refsInstance)).toBe(__DEV__); | ||
| }); | ||
| }); |