Fix React 19 Breaking Changes - Migration Guide That Actually Works

React 19 dropped December 2024 and immediately broke thousands of apps. Not "might break" - definitely breaks. The React team finally pulled the trigger on removing APIs they've been complaining about since 2017.

Why This Migration Hurts

Remember all those yellow warnings you've been ignoring for years? `ReactDOM.render is deprecated`, `string refs are deprecated`, `legacy context will be removed`? They're gone. Not deprecated anymore - literally deleted from the codebase. Your app throws TypeError: ReactDOM.render is not a function and dies.

The breaking changes fall into three categories:

• Removed deprecated APIs: PropTypes, ReactDOM.render, findDOMNode
• Updated behavior: Error handling, Strict Mode, ref forwarding
• TypeScript changes: New type requirements, useRef parameter requirements

The Reality Check You Need

Install React 18.3 first. It's literally identical to 18.2 but screams at you about everything that's about to break. React 18.3 exists solely to ruin your day with warnings.

npm install react@18.3 react-dom@18.3
npm start

Open the browser console. If you see warnings, your app will break in React 19:

• ReactDOM.render is no longer supported - your app won't start
• String refs are deprecated - components will crash
• findDOMNode is deprecated - DOM access fails

No warnings? You got lucky. Most warnings? You're in for a rough week.

How to Not Completely Fuck This Up

Phase 1: Check If Your Dependencies Are Dead
Half your libraries don't support React 19 yet. React Router took 3 weeks. Material-UI took a month and broke their CI for 3 days. Redux users had to wait for Redux Toolkit 2.0.

Phase 2: Let the Robots Fix the Easy Stuff
React has codemods that fix 80% of the breakage automatically:

npx codemod@latest react/19/migration-recipe

This fixes ReactDOM.render, string refs, and import paths. But it's not perfect - I've seen it fuck up complex component hierarchies and miss dynamic imports.

Phase 3: Fix the Shit That Breaks Everything
The codemods miss the painful stuff:

• Legacy context API (if you have this, you're fucked)
• PropTypes scattered everywhere
• Custom error boundaries that expect old behavior

Phase 4: Test Until It Hurts
React 19's Strict Mode got stricter and will surface bugs you didn't know existed. Error handling changed completely - uncaught errors go to window.reportError instead of being re-thrown. This breaks Sentry integration if you don't update it.

JSX Transform Bullshit

React 19 demands the new JSX transform from 2020. If your app is older, you'll get:

Your app is using an outdated JSX transform. Update to the modern JSX transform for faster performance

Create React App handles this automatically. Custom Webpack/Vite? Update your JSX loader config or your build will break. The upside: no more importing React in every damn file, smaller bundles, faster builds.

1. Cover Your Ass First

Create a branch. Deploy rollback plans. React 19 migrations go sideways fast. I watched one take down production for 6 hours because their error boundaries stopped working and error monitoring went dark.

git checkout -b react-19-migration
npm install --save-exact react@18.3 react-dom@18.3
npm start

React 18.3 is identical to 18.2 but screams warnings at you. Every warning = something that breaks in React 19. No warnings? Lucky you. Dozens of warnings? Clear your calendar.

2. Check If Your Dependencies Are Fucked

Most libraries weren't React 19 ready at launch. Check everything before you upgrade or you'll spend days debugging third-party breakage.

npm outdated | grep -E 'react|@types/react'
npm list react react-dom

The usual suspects that break:

• React Router: Needs v7+ (v6 dies on concurrent rendering)
• Material-UI: Requires v6+ (v5 ref forwarding is broken)
• Redux: Redux Toolkit 2.x minimum (old Redux is dead)
• Testing libraries: React Testing Library v16+ (async act() changed)

Don't upgrade if your critical dependencies aren't ready. You'll get cryptic errors like Cannot read property 'current' of undefined buried in library code that take forever to debug.

3. Let the Codemod Do the Grunt Work

Run this and pray it doesn't fuck up your imports:

npx codemod@latest react/19/migration-recipe

This runs multiple fixes:

• replace-reactdom-render: ReactDOM.render → createRoot
• replace-string-ref: String refs → callback refs
• replace-act-import: Moves act import (test shit)
• replace-use-form-state: Updates form hooks

TypeScript users, run this too:

npx types-react-codemod@latest preset-19 ./src

4. Fix the Shit the Robots Can't

Codemods handle the easy 80%. The remaining 20% will ruin your week.

Legacy Context API Removal

If you see errors about contextTypes or getChildContext, you're using the legacy Context API that was deprecated in March 2018. This will break your app completely in React 19 - no warnings, just straight crashes:

// Before (breaks in React 19)
class Parent extends React.Component {
  static childContextTypes = {
    theme: PropTypes.string.isRequired,
  };
  
  getChildContext() {
    return { theme: 'dark' };
  }
}

// After (React 19 compatible)
const ThemeContext = React.createContext('light');

function Parent({ children }) {
  return (
    <ThemeContext.Provider value=\"dark\">
      {children}
    </ThemeContext.Provider>
  );
}

PropTypes and defaultProps Removal

React 19 removes PropTypes from function components. If you're still using PropTypes in 2025, it's time to finally migrate to TypeScript or just delete them entirely:

// Before (breaks in React 19)
function Button({ text }) {
  return <button>{text}</button>;
}
Button.propTypes = {
  text: PropTypes.string,
};
Button.defaultProps = {
  text: 'Click me',
};

// After (React 19 compatible)
interface ButtonProps {
  text?: string;
}

function Button({ text = 'Click me' }: ButtonProps) {
  return <button>{text}</button>;
}

findDOMNode Replacement

Replace all instances of `ReactDOM.findDOMNode` with ref callbacks. This API was a hack from day one and finally gets removed. Good riddance:

// Before (breaks in React 19)
import { findDOMNode } from 'react-dom';

function AutofocusInput() {
  useEffect(() => {
    const input = findDOMNode(this);
    input.focus();
  }, []);
  return <input />;
}

// After (React 19 compatible)
function AutofocusInput() {
  const inputRef = useRef(null);
  
  useEffect(() => {
    inputRef.current?.focus();
  }, []);
  
  return <input ref={inputRef} />;
}

5. Error Handling Updates

React 19 changes how render errors are handled. Errors are no longer re-thrown, which breaks error monitoring tools like Sentry or Bugsnag. This caught us off guard and we lost error reporting for two weeks in production.

Update your root configuration to handle the new error reporting:

const root = createRoot(container, {
  onUncaughtError: (error, errorInfo) => {
    // Send to error monitoring service
    Sentry.captureException(error, { extra: errorInfo });
  },
  onCaughtError: (error, errorInfo) => {
    // Log caught errors (from Error Boundaries)
    console.error('Caught error:', error, errorInfo);
  }
});

6. Ref Forwarding Pattern Updates

React 19 allows refs as props, eliminating the need for forwardRef in many cases. However, this creates compatibility issues if you support both React 18 and 19.

// React 19 compatible approach
function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />;
}

// For backward compatibility
const MyInput = React.forwardRef(({ placeholder }, ref) => {
  return <input placeholder={placeholder} ref={ref} />;
});

7. Testing and Validation

React 19's enhanced Strict Mode will surface additional issues during development. Components that worked in React 18 may exhibit different behavior due to stricter effect cleanup and improved error boundaries.

Update your test expectations for:

• Different error message formats
• Modified Strict Mode behavior (effects may fire fewer times)
• New async rendering timing

Run your full test suite with React 19 installed:

npm install react@19 react-dom@19
npm test

Address any failing tests before deploying to production. React 19's concurrent features can change timing-dependent tests, especially those involving async operations or effect cleanup.

8. Performance Optimization Opportunities

React 19 introduces automatic optimizations through the React Compiler. Remove manual memoization where the compiler handles it automatically:

// React 18 (manual optimization needed)
const ExpensiveComponent = React.memo(({ data }) => {
  const processedData = useMemo(() => 
    expensiveCalculation(data), [data]
  );
  
  return <div>{processedData}</div>;
});

// React 19 (compiler optimizes automatically)
function ExpensiveComponent({ data }) {
  const processedData = expensiveCalculation(data);
  return <div>{processedData}</div>;
}

The React Compiler eliminates the need for React.memo, useMemo, and useCallback in most cases, resulting in cleaner code and better performance.

Test Like Your Job Depends On It

Staging must mirror production exactly or you'll get surprises. MUI found ref forwarding performance issues only during load testing - memory leaks that would have taken down their servers. Automated tools miss the subtle breakage that kills production apps.

Set up a staging environment that mirrors production exactly. This includes:

• Same Node.js version and package manager
• Identical environment variables and feature flags
• Production-level traffic simulation
• Real user data (anonymized)

Critical Test Scenarios:

• Error boundary behavior under load
• Concurrent rendering with complex state updates
• Server-side rendering with async components
• Third-party library interactions under stress

Deploy Gradually or Die Trying

Start with internal users. 10% of real users. Monitor error rates like a hawk. If errors spike, kill the rollout.

// Don't go full YOLO
const useReact19 = () => {
  const userId = useUserId();
  const rolloutPercentage = 10; // Start small
  
  return userId % 100 < rolloutPercentage;
};

function App() {
  const shouldUseReact19 = useReact19();
  
  if (shouldUseReact19) {
    return <React19App />;
  }
  
  return <React18App />; // Fallback
}

Watch your error monitoring. I watched a 5% error rate explode to 50% in 3 minutes when React 19's error handling broke a third-party modal library. Have a kill switch ready.

Error Monitoring Configuration

React 19's new error handling requires updates to monitoring tools. Errors are reported differently, potentially breaking existing error tracking.

// Configure error monitoring for React 19
const root = createRoot(container, {
  onUncaughtError: (error, errorInfo) => {
    // These are now reported to window.reportError
    if (window.reportError) {
      window.reportError(error);
    }
    
    // Send to monitoring service
    Sentry.captureException(error, {
      tags: { errorBoundary: 'uncaught' },
      extra: errorInfo
    });
  },
  onCaughtError: (error, errorInfo) => {
    // These come from Error Boundaries
    Sentry.captureException(error, {
      tags: { errorBoundary: 'caught' },
      extra: errorInfo
    });
  }
});

Update your error alerting thresholds. React 19's improved error handling might reduce error noise, but it could also hide errors that were previously visible.

Performance Regression Detection

React 19's performance improvements are automatic, but regressions can occur due to third-party library incompatibilities or incorrect migration patterns.

Metrics to Monitor:

• Bundle size changes (should decrease with React Compiler)
• Initial page load time (should improve with better SSR)
• Time to Interactive (TTI)
• Cumulative Layout Shift (CLS)
• Memory usage patterns

Set up performance budgets and automated alerts:

// Performance monitoring
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name === 'react-render' && entry.duration > 100) {
      // Alert on slow renders
      analytics.track('performance_regression', {
        renderTime: entry.duration,
        component: entry.detail?.componentName
      });
    }
  });
});

observer.observe({ entryTypes: ['measure'] });

When Everything Goes to Shit

Production will break. Plan your escape routes before you need them.

Rollback Options (in order of speed):

1. Feature flag kill switch: Instant traffic redirect to React 18
2. Package.json revert + redeploy: 5-10 minutes if your CI doesn't suck
3. CDN rollback: Only if you're using UMD (don't)

API Compatibility:
React 19 Server Components change data fetching patterns. Keep your API endpoints backward compatible or you'll break both React versions during rollbacks.

Post-Migration Optimization

After successfully migrating to React 19, leverage new performance features:

React Compiler Integration:
Enable the experimental compiler for automatic memoization:

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      // Compiler options
      runtimeModule: 'react/compiler-runtime'
    }]
  ]
};

Asset Loading Improvements:
Use React 19's enhanced asset loading for better performance:

import { preload, preinit } from 'react-dom';

function App() {
  useEffect(() => {
    // Preload critical resources
    preload('/api/user-data', { as: 'fetch' });
    preinit('/critical-styles.css', { as: 'style' });
  }, []);
  
  return <Dashboard />;
}

Concurrent Feature Adoption:
Gradually enable React 19's enhanced concurrent features like improved Suspense and automatic batching. These features are backward compatible but provide performance benefits when properly implemented.

Monitor performance metrics for 2-4 weeks after migration to ensure the upgrade delivered expected improvements. Document lessons learned for future major version upgrades.