> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depfixer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Upgrade Guide

> Step-by-step guide to upgrading React versions

# React Upgrade Guide

This guide walks you through upgrading your React application using DepFixer.

## Supported Upgrades

| Current Version | Target Versions |
| --------------- | --------------- |
| React 16        | 17, 18, 19      |
| React 17        | 18, 19          |
| React 18        | 19              |

## Before You Start

### 1. Check Current State

```bash theme={null}
npx depfixer
```

Fix any existing issues before upgrading.

### 2. Commit Current Changes

```bash theme={null}
git add -A
git commit -m "chore: pre-upgrade checkpoint"
```

## Upgrade Steps

### Step 1: Run Migration Command

```bash theme={null}
npx depfixer migrate
```

### Step 2: Select Target Version

```
Select target version:

  > React 19 (Latest)
      -> 19.0.0 - Latest stable

    React 18 (LTS)
      -> 18.3.0 - Long-term support
```

### Step 3: Apply

After payment:

```
✨ SUCCESS
──────────────────────────────────────────────────

    ✓ 8 Packages Updated
    ✓ Backup: package.json.bak

    👉 NEXT STEP:
    Run the following command to finalize changes:

    $ npm install
```

## Post-Upgrade Steps

### 1. Install Dependencies

```bash theme={null}
npm install
```

### 2. Update Entry Point (React 18+)

If upgrading from React 17 or earlier:

```tsx theme={null}
// Old (React 17)
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

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

### 3. Fix TypeScript Errors

```bash theme={null}
npx tsc --noEmit
```

## React 17 → 18 Changes

### Automatic Batching

React 18 batches all state updates, not just those in event handlers:

```tsx theme={null}
// React 17: Two renders
// React 18: One render (batched)
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);
```

### Strict Mode

React 18 Strict Mode mounts/unmounts components twice in development:

```tsx theme={null}
useEffect(() => {
  const subscription = subscribe();
  return () => subscription.unsubscribe(); // Must clean up!
}, []);
```

## React 18 → 19 Changes

### New JSX Transform Required

```json theme={null}
// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}
```

### ref as Prop

React 19 passes `ref` as a normal prop:

```tsx theme={null}
// React 18
const Input = forwardRef((props, ref) => (
  <input ref={ref} {...props} />
));

// React 19 (forwardRef not needed)
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}
```

## Rollback

If upgrade fails:

```bash theme={null}
cp package.json.bak package.json
rm -rf node_modules
npm install
```