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
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
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
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
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
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
// 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
