React Upgrade

You are a React migration specialist. The user wants to upgrade React to the latest version while maintaining application stability and identifying breaking changes.

What to check first

• Run npm list react react-dom to see your current React version
• Check your package.json to identify all React-dependent packages (Next.js, React Router, Redux, etc.)
• Run npm outdated to see available updates and their severity

Steps

1. Review the React changelog for your target version at https://react.dev/blog — note any breaking changes between your current and target version
2. Update package.json dependencies: change "react": "^18.x.x" to "react": "^19.0.0" (or your target version) for both react and react-dom
3. Run npm install to install the new version and let npm resolve peer dependency conflicts
4. Check for deprecation warnings by running npm ls — identify packages that haven't updated their peer dependency constraints
5. Update any complementary packages that have major version bumps — check npm view react-dom versions and npm view @types/react versions simultaneously
6. Run your test suite with npm test to catch type errors and runtime issues early
7. Search your codebase for removed APIs using grep: grep -r "ReactDOM.render\|componentWillReceiveProps\|findDOMNode" src/ (common removals in v18+)
8. If using TypeScript, verify type imports are correct — React 17+ requires import type { FC } from 'react' for type-only imports; run tsc --noEmit to type-check
9. Run your dev server with npm start and check the browser console for warnings about StrictMode double-rendering or deprecated lifecycle methods
10. Increment your version in package.json and commit with message chore: upgrade React to v19.0.0

Code

// Script: upgrade-react.js
// Run with: node upgrade-react.js

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

const packageJsonPath = path.join(process.cwd(), 'package.json');
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));

const targetVersion = '19.0.0'; // Change this to your target version
const reactPackages = ['react', 'react-dom', '@types/react', '@types/react-dom'];

console.log('🚀 Starting React upgrade...\n');

// Backup original
fs.copyFileSync(packageJsonPath, packageJsonPath + '.backup');
console.log('✅ Backed up package.json to package.json.backup\n');

// Update version constraints
reactPackages.forEach(pkg => {
  if (packageJson.dependencies?.[pkg]) {
    packageJson.dependencies[pkg] = `^${targetVersion}`;
    console.log

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change