Monitor the duration between transitions in states.

gistfile1.txt

import { useState, useEffect } from 'react';

const TestStateChangeTime = ({}) => {
  const [elapsedTime, setElapsedTime] = useState(0);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleButtonClick = () => {
    setIsModalOpen(!isModalOpen);
  };

  useEffect(() => {
    let interval; // Store the interval ID

    if (isModalOpen) {
      // Start the timer when the video is opened
      setElapsedTime(0);

      // Update elapsed time every 1 second
      interval = setInterval(() => {
        setElapsedTime((prevElapsedTime) => prevElapsedTime + 1);
      }, 1000); // Update every 1 second (1000 milliseconds)
    } else {
      // Stop the timer when the video is closed
      if (interval) {
        clearInterval(interval);
      }
      if (elapsedTime > 0) {
        console.log(elapsedTime);
        setElapsedTime(0);
      }
    }

    // Clean up the interval when the component unmounts
    return () => {
      if (interval) {
        clearInterval(interval);
      }
    };
  }, [isModalOpen]);

  return (
    <>
      <button onClick={handleButtonClick}>Toggle Modal</button>
    </>
  );
};

export default TestStateChangeTime;