import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // Set up the timer logic here.
    return () => {
      // Clean up the timer here when the component unmounts.
    };
  }, []); // Add appropriate dependencies.

  return (
    <div>
      <h1>Timer: {seconds} seconds</h1>
    </div>
  );
}

export default Timer

OBJECTIVE: Create a React component that implements a timer. The timer should start when the component mounts, update every second, and stop updating when the component is unmounted. The goal is to practice how to use useEffect for side effects like setting up intervals and cleaning them up. STARTER CODE: import React, { useState, useEffect } from 'react'; function Timer() { const [seconds, setSeconds] = useState(0); useEffect(() => { // Set up the timer logic here. return () => { // Clean up the timer here when the component unmounts. }; }, []); // Add appropriate dependencies. return ( <div> <h1>Timer: {seconds} seconds</h1> </div> ); } export default Timer -------------------------------------------------------------------------------- INSTRUCTIONS: 1. Set up an interval inside the useEffect hook to update the seconds state every second. 2. Clean up the interval in the return function of useEffect to avoid memory leaks when the component unmounts. 3. Test your component to ensure the timer starts when the component mounts and stops correctly when it unmounts. -------------------------------------------------------------------------------- EXPECTED BEHAVIOR: * When the Timer component is rendered, the timer should start counting. * If the component is removed (e.g., through conditional rendering), the interval should stop.  

Join the discussion to ask questions, share your thoughts, and discuss with other learners