import React, {useState, useEffect} from 'react';
  
  const CounterComponent = React.memo(() => {
    const [counter, setcounter] = useState(0);
  
    useEffect(
      () => {
        let counterTimer = null;
        const incrementCounter = () => setcounter(counter + 1);
  
        // counterTimer is null if it has not yet been started
        if (counterTimer === null) {
          counterTimer = setInterval(incrementCounter, 1000);
        }
  
        // Remove event listener on cleanup - note the remove function signature needs to match the add function sig
        return () => clearInterval(counterTimer);
    }, [counter]
    );

    return <span>{counter}<br/></span>;

  export {CounterComponent};