reactjs / react-codemod

React codemod scripts
MIT License
4.2k stars 288 forks source link

feat: Add codemod to transform string refs to arrow-functions #309

Open eps1lon opened 2 years ago

eps1lon commented 2 years ago

For https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#deprecate-string-refs-and-remove-production-mode-_owner-field

In: <div ref="refComponent" />; Out:

<div
  ref={(current) => {
    this.refs['refComponent'] = current;
  }}
/>

Note that this codemod only works for React 18.3 or higher.

Should not be used if the codebase contains warnings about string refs without owners e.g.

Component "ComponentNameWithRef" contains the string ref "someStringRefName". 
Support for string refs will be removed in a future major release.
This case cannot be automatically converted to an arrow function.
We ask you to manually fix this case by using useRef() or createRef() instead.
Learn more about using refs safely here:
https://reactjs.org/link/strict-mode-string-ref

Test plan

eps1lon commented 1 year ago

We decided against a codemdoddable warning

eps1lon commented 5 months ago

The plan is to land unfreezing this.refs for 18.3 and 19. Then we can use this codemod.