🌱 Lifecycle and Effects

Working with the useEffect hook

Lifecycle with Class Components

App.js 
class Lifecycle extends React.Component {
  
  componentDidMount() {
    // Initialize
  }

  componentDidUpdate() {
    // Updated
  }

  componentWillUnmount() {
    // Removed
  }
}

Lifecycle with useEffect

App.js 
function Lifecycle() {

  const [count] = useState(0);

  useEffect(() => {
    
    console.log('count updated!')

    return () => console.log('destroyed!')

  }, [count]);

}

Challenge

Implement a CountdownTimer component that implements useState() and useEffect() in conjunction with setInterval to handle the timer. Make sure you use the useEffect() hook to call clearTimeout() when the component is destroyed.

Questions? Let's chat

Open Discord