React18 Auditor

#tool:memory read repository "react18-audit-progress"

#tool:memory write repository "react18-audit-progress" "phase[N]-complete:[N]-hits"

# Total JS/JSX source files
find src/ \( -name "*.js" -o -name "*.jsx" \) | grep -v "\.test\.\|\.spec\.\|__tests__\|node_modules" | wc -l

# Class component count vs function component rough count
grep -rl "extends React\.Component\|extends Component\|extends PureComponent" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | wc -l
grep -rl "const.*=.*(\(.*\)\s*=>\|function [A-Z]" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | wc -l

# Current React version
node -e "console.log(require('./node_modules/react/package.json').version)" 2>/dev/null
cat package.json | grep '"react"'

# componentWillMount - move logic to componentDidMount or constructor
grep -rn "componentWillMount\b" src/ --include="*.js" --include="*.jsx" | grep -v "UNSAFE_componentWillMount\|\.test\." 2>/dev/null

# componentWillReceiveProps - replace with getDerivedStateFromProps or componentDidUpdate
grep -rn "componentWillReceiveProps\b" src/ --include="*.js" --include="*.jsx" | grep -v "UNSAFE_componentWillReceiveProps\|\.test\." 2>/dev/null

# componentWillUpdate - replace with getSnapshotBeforeUpdate or componentDidUpdate
grep -rn "componentWillUpdate\b" src/ --include="*.js" --include="*.jsx" | grep -v "UNSAFE_componentWillUpdate\|\.test\." 2>/dev/null

# Check if any UNSAFE_ prefix already in use (partial migration?)
grep -rn "UNSAFE_component" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." 2>/dev/null

// DANGEROUS PATTERN - worked in React 17, breaks in React 18
async handleClick() {
  this.setState({ loading: true });  // used to re-render immediately
  const data = await fetchData();
  if (this.state.loading) {          // this.state.loading is STILL old value in React 18
    this.setState({ data });
  }
}

# Find async class methods with multiple setState calls
grep -rn "async\s" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | grep -v "node_modules" | head -30

# Find setState inside setTimeout or Promises
grep -rn "setTimeout.*setState\|\.then.*setState\|setState.*setTimeout\|await.*setState\|setState.*await" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." 2>/dev/null

# Find setState in promise callbacks
grep -A5 -B5 "\.then\s*(" src/ --include="*.js" --include="*.jsx" | grep "setState" | head -20 2>/dev/null

# Find setState in native event handlers (onclick via addEventListener)
grep -rn "addEventListener.*setState\|setState.*addEventListener" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." 2>/dev/null

# Find conditional setState that reads this.state after async
grep -B3 "this\.state\." src/ --include="*.js" --include="*.jsx" | grep -B2 "await\|\.then\|setTimeout" | head -30 2>/dev/null

# childContextTypes - provider side of legacy context
grep -rn "childContextTypes\s*=" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." 2>/dev/null

# contextTypes - consumer side
grep -rn "contextTypes\s*=" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." 2>/dev/null

# getChildContext - the provider method
grep -rn "getChildContext\s*(" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." 2>/dev/null

# this.context usage (may indicate legacy context consumer)
grep -rn "this\.context\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | head -20 2>/dev/null

# String ref assignment in JSX
grep -rn 'ref="\|ref='"'"'' src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." 2>/dev/null

# this.refs accessor
grep -rn "this\.refs\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." 2>/dev/null

grep -rn "findDOMNode\|ReactDOM\.findDOMNode" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." 2>/dev/null

grep -rn "ReactDOM\.render\s*(" src/ --include="*.js" --include="*.jsx" 2>/dev/null
grep -rn "ReactDOM\.hydrate\s*(" src/ --include="*.js" --include="*.jsx" 2>/dev/null
grep -rn "unmountComponentAtNode" src/ --include="*.js" --include="*.jsx" 2>/dev/null

# document-level event listeners
grep -rn "document\.addEventListener\|document\.removeEventListener" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | grep -v "node_modules" 2>/dev/null

# window event listeners that might be React-event-dependent
grep -rn "window\.addEventListener" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | head -15 2>/dev/null

grep -rn "StrictMode\|React\.StrictMode" src/ --include="*.js" --include="*.jsx" 2>/dev/null

cat package.json | python3 -c "
import sys, json
d = json.load(sys.stdin)
deps = {**d.get('dependencies',{}), **d.get('devDependencies',{})}
for k, v in sorted(deps.items()):
    if any(x in k.lower() for x in ['react','testing','jest','apollo','emotion','router','redux','query']):
        print(f'{k}: {v}')
"

npm ls 2>&1 | grep -E "WARN|ERR|peer|invalid" | head -20

# Tests using legacy render patterns
grep -rn "ReactDOM\.render\s*(\|mount(\|shallow(" src/ --include="*.test.*" --include="*.spec.*" 2>/dev/null

# Tests with manual batching assumptions (unmocked setTimeout + state assertions)
grep -rn "setTimeout\|act(\|waitFor(" src/ --include="*.test.*" | head -20 2>/dev/null

# act() import location
grep -rn "from 'react-dom/test-utils'" src/ --include="*.test.*" 2>/dev/null

# Enzyme usage (incompatible with React 18)
grep -rn "from 'enzyme'\|shallow\|mount\|configure.*Adapter" src/ --include="*.test.*" 2>/dev/null

# React 18.3.1 Migration Audit Report
Generated: [timestamp]
Current React Version: [version]
Codebase Profile: ~[N] class components / ~[N] function components

## ⚠️ Why 18.3.1 is the Target
React 18.3.1 emits explicit deprecation warnings for every API that React 19 will remove.
A clean 18.3.1 build with zero warnings = a codebase ready for the React 19 orchestra.

## 🔴 Critical - Silent Runtime Breakers

### Automatic Batching Vulnerabilities
These patterns WORKED in React 17 but will produce wrong behavior in React 18 without flushSync.
| File | Line | Pattern | Risk |
[Every async class method with setState chains]

### Enzyme Usage (React 18 Incompatible)
[List every file - these must be completely rewritten in RTL]

## 🟠 Unsafe Lifecycle Methods (Warns in 18.3.1, Required for React 19)

### componentWillMount (→ componentDidMount or constructor)
| File | Line | What it does | Migration path |
[List every hit]

### componentWillReceiveProps (→ getDerivedStateFromProps or componentDidUpdate)
| File | Line | What it does | Migration path |
[List every hit]

### componentWillUpdate (→ getSnapshotBeforeUpdate or componentDidUpdate)
| File | Line | What it does | Migration path |
[List every hit]

## 🟠 Legacy Root API

### ReactDOM.render (→ createRoot - required for batching)
[List all hits]

## 🟡 Deprecated APIs (Warn in 18.3.1, Removed in React 19)

### Legacy Context (contextTypes / childContextTypes / getChildContext)
[List all hits - these are typically cross-file: find the provider AND consumer for each]

### String Refs
[List all this.refs.x usage]

### findDOMNode
[List all hits]

## 🔵 Event Delegation Audit

### document.addEventListener Patterns to Review
[List all hits with context - flag those that may interact with React events]

## 📦 Dependency Issues

### Peer Conflicts
[npm ls output filtered to errors]

### Packages Needing Upgrade for React 18
[List each package with current version and required version]

### Enzyme (BLOCKER if found)
[If found: list all files with Enzyme imports - full RTL rewrite required]

## Test File Issues
[List all test-specific patterns needing migration]

## Ordered Migration Plan

1. npm install [email protected] [email protected]
2. Upgrade testing-library / RTL to v14+
3. Upgrade Apollo, Emotion, react-router
4. [IF ENZYME] Rewrite all Enzyme tests to RTL
5. Migrate componentWillMount → componentDidMount
6. Migrate componentWillReceiveProps → getDerivedStateFromProps/componentDidUpdate
7. Migrate componentWillUpdate → getSnapshotBeforeUpdate/componentDidUpdate
8. Migrate Legacy Context → createContext
9. Migrate String Refs → React.createRef()
10. Remove findDOMNode → direct refs
11. Migrate ReactDOM.render → createRoot
12. Audit all async setState chains - add flushSync where needed
13. Review document.addEventListener patterns
14. Run full test suite → fix failures
15. Verify zero React 18.3.1 deprecation warnings

## Files Requiring Changes

### Source Files
[Complete sorted list]

### Test Files
[Complete sorted list]

## Totals
- Unsafe lifecycle hits: [N]
- Batching vulnerabilities: [N]
- Legacy context patterns: [N]
- String refs: [N]
- findDOMNode: [N]
- ReactDOM.render: [N]
- Dependency conflicts: [N]
- Enzyme files (if applicable): [N]

#tool:memory write repository "react18-audit-progress" "complete:[total]-issues"