(null);
useEffect(() => {
const sub = userService.getUser(userId).pipe(
switchMap(user => userService.getActivity(user.id)),
catchError(err => of(null))
).subscribe(data => setUser(data));
return () => sub.unsubscribe();
}, [userId]);
return {user?.name}
;
}
```
### Correct: Replace RxJS with React Query or native async patterns
```typescript
// ✅ GOOD — React Query handles caching, refetching, error states automatically
function UserProfile({ userId }: { userId: string }) {
const { data: user, isLoading, error } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
});
if (isLoading) return Loading...
;
if (error) return Error: {(error as Error).message}
;
return {user?.name}
;
}
```
### Wrong: Migrating NgModules to React "module" wrappers
```typescript
// ❌ BAD — Trying to recreate Angular's NgModule concept in React
// shared.module.tsx
export function SharedModule({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
// This leads to deeply nested provider trees ("provider hell")
```
### Correct: Use flat composition with co-located providers
```typescript
// ✅ GOOD — Only wrap what needs wrapping, keep providers flat
// app/providers.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
export function AppProviders({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
// Auth context only wraps routes that need it:
// }>
// } />
//
```
### Wrong: Keeping two-way data binding mentality with uncontrolled inputs
```typescript
// ❌ BAD — Using refs to imperatively read/write form values (Angular [(ngModel)] muscle memory)
function EditProfile() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const handleSubmit = () => {
const name = nameRef.current!.value; // Imperative read
const email = emailRef.current!.value; // No validation, no re-render
fetch('/api/profile', { method: 'PUT', body: JSON.stringify({ name, email }) });
};
return (
);
}
```
### Correct: Use controlled components with state
```typescript
// ✅ GOOD — Controlled inputs: React state is the single source of truth
function EditProfile() {
const [name, setName] = useState('John');
const [email, setEmail] = useState('john@example.com');
const [saving, setSaving] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setSaving(true);
await fetch('/api/profile', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, email }),
});
setSaving(false);
};
return (
);
}
```
### Wrong: Big-bang rewrite of the entire Angular app at once
```typescript
// ❌ BAD — Halting all feature development for 6+ months to rewrite
// "We'll rewrite the entire app in React over Q2-Q3, then launch."
// Result: scope creep, feature freeze frustration, missed deadlines,
// regressions discovered only after go-live.
```
### Correct: Strangler Fig -- migrate route by route while shipping features
```typescript
// ✅ GOOD — Incremental migration with continuous delivery
// Month 1: Set up single-spa shell, migrate /login route to React
// Month 2: Migrate /users route, keep shipping Angular features on /dashboard
// Month 3: Migrate /dashboard
// Month 4: Migrate /settings, remove Angular
// Each migration is tested independently and deployed to production.
```
## Common Pitfalls
- **Trying to find 1:1 React equivalents for every Angular concept**: Angular has DI, modules, decorators, lifecycle hooks, pipes, guards, interceptors, and resolvers. React has components, hooks, and context. Don't port the architecture -- port the behavior. [src3]
- **Keeping RxJS alongside React hooks**: Developers often keep RxJS "because it works" and subscribe inside `useEffect`. This creates dual reactivity systems, makes debugging harder, and prevents React's Suspense/Concurrent features from working. Fix: Replace `Observable`-based data fetching with React Query or SWR; replace `BehaviorSubject` state with `useState`/`useReducer`/Zustand. [src4]
- **Losing TypeScript strictness during migration**: Angular projects typically use `strict: true` in tsconfig. When creating the React project, ensure the same strictness. Fix: Copy `strict`, `noImplicitAny`, `strictNullChecks` settings to the React tsconfig. [src6]
- **Not handling zone.js removal properly**: Angular relies on `zone.js` for change detection. When running both frameworks, zone.js patches all async APIs (setTimeout, Promise, fetch), which can cause unexpected behavior in React. Fix: Configure Angular to run with `NgZone: 'noop'` during coexistence, or isolate Angular's zone to its micro-frontend. [src5]
- **Forgetting to migrate route guards and interceptors**: Angular's `canActivate` guards and `HttpInterceptor` don't have direct React equivalents. Fix: Implement guards as wrapper/layout route components; implement interceptors as Axios/fetch middleware. [src4]
- **Sharing styles without a strategy**: Angular components use ViewEncapsulation (emulated Shadow DOM). React components use global CSS, CSS modules, or CSS-in-JS. Mix them carelessly and styles bleed across frameworks. Fix: Use CSS Modules or a shared design token system (CSS custom properties) for both. [src3, src6]
- **Not measuring bundle size during coexistence**: Running both Angular (~150 KB gzipped) and React (~45 KB gzipped) simultaneously inflates the initial bundle. Fix: Use lazy loading aggressively -- only load Angular for legacy routes and React for migrated routes. Monitor with `webpack-bundle-analyzer`. [src7]
- **Ignoring Angular signals as a migration stepping stone**: Angular 16+ signals (`signal()`, `computed()`, `effect()`) are conceptually identical to React's `useState`/`useMemo`/`useEffect`. Refactoring RxJS to signals first makes the final React migration almost mechanical. [src2]
## Diagnostic Commands
```bash
# Count Angular-specific patterns remaining in codebase
grep -rn "@Component\|@Injectable\|@NgModule\|@Pipe\|@Directive" --include="*.ts" src/ | wc -l
# Count RxJS usage (should trend toward zero as migration progresses)
grep -rn "subscribe(\|\.pipe(\|BehaviorSubject\|switchMap\|mergeMap\|combineLatest" --include="*.ts" src/ | wc -l
# Count Angular signals (useful if pre-migrating RxJS to signals first)
grep -rn "signal(\|computed(\|effect(" --include="*.ts" src/ | wc -l
# Check total bundle size during coexistence
npx webpack-bundle-analyzer dist/stats.json
# Verify no zone.js interference in React components
grep -rn "zone.js\|NgZone" --include="*.ts" src/ | head -10
# List all Angular packages still installed
npm ls 2>/dev/null | grep @angular
# Check for duplicate dependencies (Angular + React both pulling in rxjs, etc.)
npm ls --all 2>/dev/null | grep -E "rxjs|zone.js|@angular" | sort -u
# Verify React routes are loading (browser console)
# window.__SINGLE_SPA_DEVTOOLS && console.log(window.__SINGLE_SPA_DEVTOOLS.exposedMethods.getAppNames())
```
## Version History & Compatibility
| Version | Status | Breaking Changes | Migration Notes |
|---|---|---|---|
| Angular 22 (~Jun 2026) | Upcoming | Signal-first era — zoneless change detection is the default for new projects | Closest yet to React's model; signals and zoneless remove most of the conceptual gap |
| Angular 21 (Nov 2025) | Current LTS | Continued signal/zoneless polish, Material 3 alignment | Modern baseline; minimal NgModule surface, signals everywhere |
| Angular 20 (May 2025) | LTS (security to Nov 2026) | `effect`, `linkedSignal`, `toSignal` stable; zoneless stable as of 20.2; incremental hydration | Recommended upgrade target before migrating -- signals map 1:1 to React hooks |
| Angular 19 (Nov 2024) | Maintenance | Standalone components default, `@let` syntax | Easy to migrate -- no NgModule boilerplate |
| Angular 17-18 (2023-24) | EOL/Maintenance | New control flow (`@if`, `@for`, `@switch`), deferrable views, zoneless (experimental) | Control flow closer to JSX; upgrade to 20+ first if time allows |
| Angular 14-16 (2022-23) | EOL/Maintenance | Standalone (opt-in), typed forms, signals (preview) | Standalone components migrate individually; refactor RxJS to signals first |
| React 19.2 (Oct 2025) | Current | Document metadata in components, refined Suspense/Activity, type hardening | Latest stable (19.2.x). Use with the React Compiler |
| React Compiler v1.0 (Oct 2025) | Stable | Automatic memoization | Drop most manual `useMemo`/`useCallback`; opt in via the babel/swc plugin + `eslint-plugin-react-hooks` v7 |
| React 19 (Dec 2024) | Active | `use()` hook, `ref` as prop, Actions, `useActionState`, `useOptimistic`; `forwardRef` deprecated | Use modern API -- pass `ref` as a prop, prefer Actions for forms |
| React 18 (Mar 2022) | LTS | `createRoot`, Concurrent features, `useSyncExternalStore` | Minimum recommended React version for new migrations |
## When to Use / When Not to Use
| Use When | Don't Use When | Use Instead |
|---|---|---|
| Team is hiring React developers and Angular talent is scarce | Angular team is productive and no hiring issues | Stay on Angular, upgrade to latest version |
| App needs React ecosystem libraries (Next.js, React Native, Remix) | Server-side rendering is the only need | Angular 17+ SSR or Angular Universal |
| Codebase has accumulated technical debt and a rewrite is justified | App is well-maintained and meeting business needs | Upgrade Angular version instead |
| Company is standardizing on React across multiple products | Angular app is isolated and self-contained | Maintain independently |
| Complex RxJS chains are causing bugs and developer confusion | Team is proficient with RxJS and reactive patterns | Simplify RxJS with Angular signals instead |
| UI library (Angular Material) is limiting design flexibility | Current UI library meets design requirements | Swap UI library within Angular |
| Need to share code between web and mobile (React Native) | Only need responsive web design | Keep Angular, use responsive CSS |
## Important Caveats
- Angular and React have fundamentally different mental models: Angular is opinionated (DI, decorators, modules, RxJS), React is flexible (hooks, JSX, pick-your-own-libraries). Resist the urge to recreate Angular's architecture in React -- embrace React's patterns.
- During coexistence (single-spa / Module Federation), expect a 150-200 KB increase in initial bundle size. Use aggressive code splitting and lazy loading to keep perceived performance acceptable.
- zone.js (Angular's change detection mechanism) patches global async APIs. If React components exhibit unexpected re-renders or timing issues during coexistence, configure Angular with `NgZone: 'noop'` or isolate its zone.
- RxJS `Observable` patterns do not compose well with React Suspense or React Server Components. Plan to fully replace RxJS with React-native patterns (React Query, hooks, `useSyncExternalStore`) rather than bridging them.
- Angular 20+ (signals stable, zoneless stable as of 20.2) and the upcoming Angular 22 "signal-first" release are architecturally much closer to React. If your Angular app is on v14-19, upgrading to v20+ first and refactoring RxJS to signals usually shrinks the eventual React migration, because signals map almost 1:1 to React hooks.
- React 19's `use()` hook, `useActionState`, and `useOptimistic` provide first-class replacements for patterns Angular developers are accustomed to (async pipe, form state management, optimistic updates). Prefer these over older patterns when targeting React 19.2.
- The React Compiler reached v1.0 (Oct 2025) and provides automatic memoization. Adopt it on the React side of the migration to avoid hand-writing `useMemo`/`useCallback` — pair it with `eslint-plugin-react-hooks` v7 for compiler-aware linting. Note `forwardRef` is deprecated in React 19; pass `ref` as a regular prop in any plugin/component wrappers.
- Timeline estimates vary significantly: small apps (<10K LOC) take 1-3 months; medium apps (10K-50K LOC) take 3-6 months; large enterprise apps (>50K LOC) can take 6-18 months with the Strangler Fig approach.
## Related Units
- [AngularJS to Angular Migration](/software/migrations/angularjs-to-angular/2026)
- [AngularJS to React Migration](/software/migrations/angularjs-to-react/2026)
- [jQuery to React Migration](/software/migrations/jquery-to-react/2026)
- [JavaScript to TypeScript Migration](/software/migrations/javascript-to-typescript/2026)