clearInterval not clearing the set interval onMouseUp-CodePudding

Trying to make a button that you hold down and at the end of a set amount of time another function runs. The function runs onm ouseDown and clears the interval onm ouseUp but the interval still runs after releasing the button.

This is the code currently. I have the interval global and set it in the planting function. It should unset in the notPlanting function but it does not.

import React from "react";

function PlantDefuser() {
    var interval

    function planting() {
        interval = setInterval(() => {
            console.log("Defuser Planted")
        }, 1000)
    }

    function notPlanting() {
        console.log(interval)
        clearInterval(interval)
    }

    return (
        <button onm ouseDown={planting} onm ouseUp={notPlanting}>Press and Hold</button>
    )
}

export default PlantDefuser

CodePudding user response：

This could help you:

useRef allows us to store and update data in the component without triggering a re-render. Now the only re-render happens when the props are updated.

We can store interval in a ref like so

import { useRef } from "react";

const PlantDefuser = () => {
  const interval = useRef();

  function planting() {
    interval.current = setInterval(() => {
      console.log("Defuser Planted");
    }, 1000);
  }

  function notPlanting() {
    clearInterval(interval.current);
  }

  return (
    <button onm ouseDown={planting} onm ouseUp={notPlanting}>
      Press and Hold
    </button>
  );
}

export default PlantDefuser

CodePudding user response：

When you declare variables like so in the function component, it is being created on each render. You should be saving the interval id in a state like so:

import React, { useState } from "react";

const PlantDefuser = () => {
    const [plantingInterval, setPlantingInterval] = useState(null);

    const planting = () => {
        const plantingIntervalId = setInterval(() => {
            console.log("Defuser Planted");
        }, 1000);
        setPlantingInterval(plantingIntervalId);
    };

    const notPlanting = () => {
        clearInterval(plantingInterval);
        setPlantingInterval(null);
    };

    return (
        <button onm ouseDown={planting} onm ouseUp={notPlanting}>
            Press and Hold
        </button>
    );
};

export default PlantDefuser;

You might also want to make sure the interval is being cleared when the component unmounts.

CodePudding user response：

You can use useEffect hook with cleanup function to manage the clearInterval method .

like this :

function PlantDefuser() {
  const [run, setRun] = useState(false);

  useEffect(() => {
    if (run) {
      const countTimer = setInterval(() => {
        console.log("Defuser Planted");
      }, 1000);

      return () => {
        console.log(countTimer);
        clearInterval(countTimer);
      };
    }
  }, [run]);

  return (
    <button onm ouseDown={() => setRun(!run)} onm ouseUp={() => setRun(!run)}>
      Press and Hold
    </button>
  );
}

export default PlantDefuser;