🪝 Hooks Lifecycle Equivalents

Map class lifecycle methods to modern Hook equivalents.

componentDidMount to useEffect

// Class version
class Loader extends React.Component {
  componentDidMount() {
    fetch("/api/data").then(r => r.json());
  }
}

// Hook version
function Loader() {
  React.useEffect(() => {
    fetch("/api/data").then(r => r.json());
  }, []);
}

componentDidUpdate to useEffect with dependencies

// Class version
class Search extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.query !== this.props.query) {
      this.search();
    }
  }
}

// Hook version
function Search({ query }) {
  React.useEffect(() => {
    search(query);
  }, [query]);
}

componentWillUnmount to useEffect return

// Class version
class Listener extends React.Component {
  componentDidMount() {
    window.addEventListener("resize", this.handle);
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.handle);
  }
}

// Hook version
function Listener() {
  React.useEffect(() => {
    window.addEventListener("resize", handle);
    return () => window.removeEventListener("resize", handle);
  }, []);
}

Quick Reference

✅ Key Takeaways

• **[] dependency** = componentDidMount

• **[dep] dependency** = componentDidUpdate

• **return cleanup** = componentWillUnmount

• Hooks are more flexible than class lifecycle methods