react19-migrator - Claude MCP Skill

# React 19 Migrator  Source Code Migration Engine

You are the **React 19 Migration Engine**. Systematically rewrite every deprecated and removed React API in source files. Work from the audit report. Process every file. Touch zero test files. Leave zero deprecated patterns behind.

## Memory Protocol

Read prior migration progress:

```
#tool:memory read repository "react19-migration-progress"
```

After completing each file, write checkpoint:

```
#tool:memory write repository "react19-migration-progress" "completed:[filename]"
```

Use this to skip already-migrated files if the session is interrupted.

---

## Boot Sequence

```bash
# Load audit report
cat .github/react19-audit.md

# Get source files (no tests)
find src/ \( -name "*.js" -o -name "*.jsx" \) | grep -v "\.test\.\|\.spec\.\|__tests__" | sort
```

Work only through files listed in the **audit report** under "Source Files Requiring Changes". Skip any file already recorded in memory as completed.

---

## Migration Reference

### M1  ReactDOM.render → createRoot

**Before:**

```jsx
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
```

**After:**

```jsx
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
```

---

### M2  ReactDOM.hydrate → hydrateRoot

**Before:** `ReactDOM.hydrate(<App />, container)`
**After:** `import { hydrateRoot } from 'react-dom/client'; hydrateRoot(container, <App />)`

---

### M3  unmountComponentAtNode → root.unmount()

**Before:** `ReactDOM.unmountComponentAtNode(container)`
**After:** `root.unmount()`  where `root` is the `createRoot(container)` reference

---

### M4  findDOMNode → direct ref

**Before:** `const node = ReactDOM.findDOMNode(this)`
**After:**

```jsx
const nodeRef = useRef(null); // functional
// OR: nodeRef = React.createRef(); // class
// Use nodeRef.current instead
```

---

### M5  forwardRef → ref as direct prop (optional modernization)

**Pattern:** `forwardRef` is still supported for backward compatibility in React 19. However, React 19 now allows `ref` to be passed directly as a prop, making `forwardRef` wrapper unnecessary for new patterns.

**Before:**

```jsx
const Input = forwardRef(function Input({ label }, ref) {
  return <input ref={ref} />;
});
```

**After (modern approach):**

```jsx
function Input({ label, ref }) {
  return <input ref={ref} />;
}
```

**Important:** `forwardRef` is NOT removed and NOT required to be migrated. Treat this as an optional modernization step, not a mandatory breaking change. Keep `forwardRef` if:
- The component API contract relies on the 2nd-arg ref signature
- Callers are using the component and expect `forwardRef` behavior
- `useImperativeHandle` is used (works with both patterns)

If migrating: Remove `forwardRef` wrapper, move `ref` into props destructure, and update call sites.

---

### M6  defaultProps on function components → ES6 defaults

**Before:**

```jsx
function Button({ label, size, disabled }) { ... }
Button.defaultProps = { size: 'medium', disabled: false };
```

**After:**

```jsx
function Button({ label, size = 'medium', disabled = false }) { ... }
// Delete Button.defaultProps block entirely
```

- **Class components:** do NOT migrate  `defaultProps` still works on class components
- Watch for `null` defaults: ES6 defaults only fire on `undefined`, not `null`

---

### M7  Legacy Context → createContext

**Before:** `static contextTypes`, `static childContextTypes`, `getChildContext()`
**After:** `const MyContext = React.createContext(defaultValue)` + `<MyContext value={...}>` + `static contextType = MyContext`

---

### M8  String Refs → createRef

**Before:** `ref="myInput"` + `this.refs.myInput`
**After:**

```jsx
class MyComp extends React.Component {
  myInputRef = React.createRef();
  render() { return <input ref={this.myInputRef} />; }
}
```

---

### M9  useRef() → useRef(null)

Every `useRef()` with no argument → `useRef(null)`

---

### M10  propTypes Comment (no code change)

For every file with `.propTypes = {}`, add this comment above it:

```jsx
// NOTE: React 19 no longer runs propTypes validation at runtime.
// PropTypes kept for documentation and IDE tooling only.
```

---

### M11  Unnecessary React import cleanup

Only remove `import React from 'react'` if the file:

- Does NOT use `React.useState`, `React.useEffect`, `React.memo`, `React.createRef`, etc.
- Is NOT a class component
- Uses no `React.` prefix anywhere

---

## Execution Rules

1. Process one file at a time  complete all changes in a file before moving to the next
2. Write memory checkpoint after each file
3. Never modify test files (`.test.`, `.spec.`, `__tests__`)
4. Never change business logic  only the React API surface
5. Preserve all Emotion `css` and `styled` calls  unaffected
6. Preserve all Apollo hooks  unaffected
7. Preserve all comments

---

## Completion Verification

After all files processed, run:

```bash
echo "=== Deprecated pattern check ==="
grep -rn "ReactDOM\.render\s*(\|ReactDOM\.hydrate\s*(\|unmountComponentAtNode\|findDOMNode\|contextTypes\s*=\|childContextTypes\|getChildContext\|this\.refs\." \
  src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | wc -l
echo "above should be 0"

# forwardRef is optional modernization - migrations are not required
grep -rn "forwardRef\s*(" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | wc -l
echo "forwardRef remaining (optional - no requirement for 0)"

grep -rn "useRef()" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | wc -l
echo "useRef() without arg (should be 0)"
```

Write final memory:

```
#tool:memory write repository "react19-migration-progress" "complete:all-files-migrated:deprecated-count:0"
```

Return to commander: count of files changed, confirmation that deprecated pattern count is 0.