React Class Component Lifecycle vs Hooks Execution Mapping

// --- 1. CLASS COMPONENT (Fragmented Logic) ---
class UserProfileClass extends React.Component<{ userId: string }, { user: any; width: number }> {
  state = { user: null, width: window.innerWidth };

  componentDidMount() {
    this.fetchUser(this.props.userId);
    window.addEventListener("resize", this.handleResize);
  }

  componentDidUpdate(prevProps: { userId: string }) {
    if (prevProps.userId !== this.props.userId) {
      this.fetchUser(this.props.userId);
    }
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.handleResize);
  }

  handleResize = () => this.setState({ width: window.innerWidth });
  fetchUser = (id: string) => fetchUser(id).then((u) => this.setState({ user: u }));

  render() {
    return <div>{this.state.user?.name} (Width: {this.state.width})</div>;
  }
}

// --- 2. FUNCTIONAL COMPONENT WITH HOOKS (Colocated Concerns) ---
function UserProfileHooks({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);
  const [width, setWidth] = useState(() => (typeof window !== "undefined" ? window.innerWidth : 0));

  // Concern A: Data sync
  useEffect(() => {
    let active = true;
    fetchUser(userId).then((u) => {
      if (active) setUser(u);
    });
    return () => { active = false; };
  }, [userId]);

  // Concern B: Window resize
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return <div>{user?.name} (Width: {width})</div>;
}

// CLASS: Always logs latest state because 'this.state' is mutated in place
class ClassCounter extends React.Component {
  state = { count: 0 };
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    setTimeout(() => {
      console.log("Class count after 2s:", this.state.count); // Logs LATEST count!
    }, 2000);
  };
}

// HOOKS: Captures 'count' at the moment of click (Closure Snapshot)
function HookCounter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
    setTimeout(() => {
      console.log("Hook count after 2s:", count); // Logs SNAPSHOT value (e.g. 0)!
    }, 2000);
  };
  // Fix for latest value: use a ref (useRef) to emulate mutable instance
}