InterviewHubPRO
Section Overview
Q380

Question 380 of 445

Part 11: Legacy Architecture, Migration Patterns & Historical Internals (354 - 445)

85%
React & Modern Frontend (445 Qs)•Part 11: Legacy Architecture, Migration Patterns & Historical Internals (354 - 445)

What are the lifecycle methods going to be deprecated in React v16?

⚠️ FULLY DEPRECATED: These lifecycle methods have been deprecated and removed from React 17+.

markdown
The following lifecycle methods were deprecated due to unsafe coding practices and problems with async rendering:

1. `componentWillMount()` - **REMOVED in React 17**
2. `componentWillReceiveProps()` - **REMOVED in React 17**
3. `componentWillUpdate()` - **REMOVED in React 17**

**Timeline:**
- React 16.3: Methods aliased with `UNSAFE_` prefix
- React 17+: Unprefixed versions completely removed
- Current (React 18/19): Only `UNSAFE_` versions exist (not recommended)

**Modern Alternatives:**

| Deprecated Method | Modern Replacement |
|---|---|
| `componentWillMount()` | `constructor()` or `componentDidMount()` |
| `componentWillReceiveProps()` | `static getDerivedStateFromProps()` or `componentDidUpdate()` |
| `componentWillUpdate()` | `getSnapshotBeforeUpdate()` + `componentDidUpdate()` |

**Best Practice:** Use functional components with hooks instead:
- `useEffect()` for side effects
- `useState()` for state management
- `useMemo()`/`useCallback()` for optimization

Code Example

tsx
import React, { Component, useEffect } from 'react';

// Deprecated in React 16.3 and fully removed/aliased in React 17+:
class DeprecatedLifecycles extends Component {
  // ❌ Deprecated: componentWillMount() -> Use constructor or componentDidMount
  // ❌ Deprecated: componentWillReceiveProps(nextProps) -> Use componentDidUpdate or getDerivedStateFromProps
  // ❌ Deprecated: componentWillUpdate(nextProps, nextState) -> Use getSnapshotBeforeUpdate + componentDidUpdate
}

// ✅ Modern Replacement using Functional Component with useEffect
function ModernReplacement({ userId }: { userId: string }) {
  useEffect(() => {
    // Replaces componentWillMount & componentWillReceiveProps async fetch patterns
    fetchUserData(userId);
  }, [userId]);

  return <div>User Data Loaded</div>;
}