Skip to main content

​
React Upgrade Guide

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

​
Supported Upgrades

Current VersionTarget Versions
React 1617, 18, 19
React 1718, 19
React 1819

​
Before You Start

​
1. Check Current State

npx depfixer
Fix any existing issues before upgrading.

​
2. Commit Current Changes

git add -A
git commit -m "chore: pre-upgrade checkpoint"

​
Upgrade Steps

​
Step 1: Run Migration Command

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

npm install

​
2. Update Entry Point (React 18+)

If upgrading from React 17 or earlier: 
// 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

npx tsc --noEmit

​
React 17 → 18 Changes

​
Automatic Batching

React 18 batches all state updates, not just those in event handlers: 
// 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: 
useEffect(() => {
  const subscription = subscribe();
  return () => subscription.unsubscribe(); // Must clean up!
}, []);

​
React 18 → 19 Changes

​
New JSX Transform Required

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

​
ref as Prop

React 19 passes ref as a normal prop: 
// 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: 
cp package.json.bak package.json
rm -rf node_modules
npm install