Migration & Refactoring Patterns

Strategies for migrating legacy React code: Class to Hooks migration, Redux to modern state management, upgrading React versions, and incremental refactoring.

🔀 1. Class to Hooks Migration

Time to say goodbye to class components! 👋 Let's transform those verbose lifecycle methods into sleek, elegant hooks. It's like upgrading from a flip phone to a smartphone — same job, way better experience! 🚀

🔴 Impact: CRITICAL — Classes are the past, hooks are the future — this migration is non-negotiable for modern React! 🏗️

📋 In this section: Class vs Functional Components • State Migration • Lifecycle to useEffect • Event Handlers

tsx

// ❌ Class Component
class Counter extends React.Component {
  state = { count: 0 };
  
  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }
  
  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }
  
  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    );
  }
}

Preview

Console

tsx

// ✅ Hooks Equivalent
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Preview

Console

Migration & Refactoring Patterns

Strategies for migrating legacy React code: Class to Hooks migration, Redux to modern state management, upgrading React versions, and incremental refactoring.

🔀 1. Class to Hooks Migration

🔴 Impact: CRITICAL — Classes are the past, hooks are the future — this migration is non-negotiable for modern React! 🏗️

📋 In this section: Class vs Functional Components • State Migration • Lifecycle to useEffect • Event Handlers

tsx

// ❌ Class Component
class Counter extends React.Component {
  state = { count: 0 };
  
  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }
  
  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }
  
  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    );
  }
}

Preview

Console

tsx

// ✅ Hooks Equivalent
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Preview

Console