fix replace-string-ref to delete refs on unmount

Match string-ref semantics by deleting this.refs properties when callback refs receive null, instead of assigning null.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: alexbit-codemod

codemods/replace-string-ref/README.md

@@ -2,6 +2,8 @@
 
 Replace string refs in React class components with callback refs that assign through `this.refs`.
 
+On unmount, React invokes callback refs with `null`. The generated callback deletes the `this.refs` property in that case (instead of assigning `null`) so behavior stays closer to string refs for checks like `typeof this.refs.refName`, `'refName' in this.refs`, and `Object.keys(this.refs)`.
+
 ## Usage
 
 ```bash

codemods/replace-string-ref/scripts/codemod.ts

@@ -53,7 +53,11 @@ function callbackRefText(refName: string): string {
     ? `this.refs.${refName}`
     : `this.refs[${JSON.stringify(refName)}]`;
   return `ref={(ref) => {
-        ${assignmentTarget} = ref;
+        if (ref === null) {
+          delete ${assignmentTarget};
+        } else {
+          ${assignmentTarget} = ref;
+        }
       }}`;
 }
 

codemods/replace-string-ref/tests/class-component-custom-import-names/expected.tsx

@@ -3,15 +3,23 @@ import React1, { PureComponent as PureComponent1 } from "react";
 class C extends React1.Component {
   render() {
     return (<div ref={(ref) => {
-        this.refs.refName = ref;
+        if (ref === null) {
+          delete this.refs.refName;
+        } else {
+          this.refs.refName = ref;
+        }
       }} />);
   }
 }
 
 class C1 extends PureComponent1 {
   render() {
     return (<div ref={(ref) => {
-        this.refs.refName = ref;
+        if (ref === null) {
+          delete this.refs.refName;
+        } else {
+          this.refs.refName = ref;
+        }
       }} />);
   }
 }

codemods/replace-string-ref/tests/class-component-default-import/expected.tsx

@@ -3,15 +3,23 @@ import React from "react";
 class C extends React.Component {
   render() {
     return (<div ref={(ref) => {
-        this.refs.refName = ref;
+        if (ref === null) {
+          delete this.refs.refName;
+        } else {
+          this.refs.refName = ref;
+        }
       }} />);
   }
 }
 
 class C1 extends React.PureComponent {
   render() {
     return (<div ref={(ref) => {
-        this.refs.refName = ref;
+        if (ref === null) {
+          delete this.refs.refName;
+        } else {
+          this.refs.refName = ref;
+        }
       }} />);
   }
 }

codemods/replace-string-ref/tests/class-component-named-import/expected.tsx

@@ -3,15 +3,23 @@ import { Component, PureComponent } from "react";
 class C extends Component {
   render() {
     return (<div ref={(ref) => {
-        this.refs.refName = ref;
+        if (ref === null) {
+          delete this.refs.refName;
+        } else {
+          this.refs.refName = ref;
+        }
       }} />);
   }
 }
 
 class C1 extends PureComponent {
   render() {
     return (<div ref={(ref) => {
-        this.refs.refName = ref;
+        if (ref === null) {
+          delete this.refs.refName;
+        } else {
+          this.refs.refName = ref;
+        }
       }} />);
   }
 }

codemods/replace-string-ref/tests/delete-ref-on-unmount/expected.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+class C extends React.Component {
+  render() {
+    return (<div ref={(ref) => {
+        if (ref === null) {
+          delete this.refs.refName;
+        } else {
+          this.refs.refName = ref;
+        }
+      }} />);
+  }
+}

codemods/replace-string-ref/tests/delete-ref-on-unmount/input.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+class C extends React.Component {
+  render() {
+    return <div ref="refName" />;
+  }
+}

codemods/replace-string-ref/tests/delete-ref-on-unmount/metrics.json

@@ -0,0 +1,11 @@
+{
+  "string-ref-replacements": [
+    {
+      "cardinality": {
+        "file": "tests/delete-ref-on-unmount/input.tsx",
+        "refs": "refName"
+      },
+      "count": 1
+    }
+  ]
+}

codemods/replace-string-ref/tests/export-default-class/expected.tsx

@@ -1,4 +1,8 @@
 import React from "react";
 export default class C extends React.Component { render() { return (<div ref={(ref) => {
-        this.refs.refName = ref;
+        if (ref === null) {
+          delete this.refs.refName;
+        } else {
+          this.refs.refName = ref;
+        }
       }} />); } }

codemods/replace-string-ref/tests/multiple-string-refs/expected.tsx

@@ -1,6 +1,14 @@
 import React from "react";
 class C extends React.Component { render() { return <><div ref={(ref) => {
-        this.refs.a = ref;
+        if (ref === null) {
+          delete this.refs.a;
+        } else {
+          this.refs.a = ref;
+        }
       }} /><span ref={(ref) => {
-        this.refs.b = ref;
+        if (ref === null) {
+          delete this.refs.b;
+        } else {
+          this.refs.b = ref;
+        }
       }} /></>; } }