Question 214261 in Reactjs Question posted in
The new location for the React Documentation can be found here.

ReactJS-setInterval not working as expected

import React,{useState} from "react";
import {Dialog,DialogTitle,DialogContent,DialogActions,Button} from "@mui/material";
const SessionTimeoutDialog=()=>
{
  let b;
  let [intervalStopCount,setIntervalStopCount]=useState(0);
  let [a,setA]=useState(0);
  const [o,setO]=useState(false);
  function print5(){console.log("Testing print5 function");}
  const print7=(e)=>
  {
    console.log(e);
    e.preventDefault();
    console.log("Testing print7 function");
  }
  const stop=(e)=>
  {
    setIntervalStopCount(++intervalStopCount);
    setO(!o);
    clearInterval(b);
    console.log("intervalStopCount",intervalStopCount+" "+o);
    if(a===5) print5();
    if(a===7) print7();
  }
  const start=(e)=>
  {
    setO(true);
    console.log("Started",o);
    b=setInterval(()=>
    {
      setA(++a);
      console.log(a);
      if(a===10) setA(void 0);
      if(a===void 0)
      {
          console.log("a is undefined")
          setA(12);
      }
      if(a===15)
      {
        setA(0);
        clearInterval(b);
      }
    },500);
    console.log("Delaying by 0.5 second.");
  }
  return(
    <Dialog open={true}>
      <DialogTitle>Dialog</DialogTitle>
      <DialogContent>Hello!</DialogContent>
      <DialogActions>
        <Button onClick={start}>Start</Button>
        <Button onClick={stop}>Stop</Button>
        {/* <Button onClick={stop}></Button> */}
      </DialogActions>
    </Dialog>
  );
};
export default SessionTimeoutDialog;

I am new to react and trying to explore the framework so I might not know how some things work but please help me out here.
I am trying to start an interval in start and stop it in stop. But, the stop function is not clearing the interval variable b when the stop button is clicked, only when a reaches 15, clearInterval is clearing the imterval, Is there any problem with context? or something else that i am missing out. and also, why are print5 nad print7 functions r not being called?

Tags:

2

Answers


  1. 0

    Here is the updated version of the code

    import React, { useState, useEffect } from "react";
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material";

const SessionTimeoutDialog = () => {
  const [intervalStopCount, setIntervalStopCount] = useState(0);
  const [a, setA] = useState(0);
  const [o, setO] = useState(false);
  let intervalId;

  useEffect(() => {
    return () => {
      clearInterval(intervalId);
    };
  }, [intervalId]);

  function print5() {
    console.log("Testing print5 function");
  }

  const print7 = (e) => {
    console.log(e);
    e.preventDefault();
    console.log("Testing print7 function");
  };

  const stop = (e) => {
    clearInterval(intervalId);
    setO(false);
    console.log("intervalStopCount", intervalStopCount + " " + o);
    if (a === 5) print5();
    if (a === 7) print7(e);
  };

  const start = (e) => {
    setO(true);
    console.log("Started", o);
    intervalId = setInterval(() => {
      setA((prevA) => {
        const nextA = prevA + 1;
        console.log(nextA);
        if (nextA === 10) return undefined;
        if (nextA === undefined) {
          console.log("a is undefined");
          return 12;
        }
        if (nextA === 15) {
          clearInterval(intervalId);
          return 0;
        }
        return nextA;
      });
    }, 500);
    console.log("Delaying by 0.5 second.");
  };

  return (
    <Dialog open={true}>
      <DialogTitle>Dialog</DialogTitle>
      <DialogContent>Hello!</DialogContent>
      <DialogActions>
        <Button onClick={start}>Start</Button>
        <Button onClick={stop}>Stop</Button>
      </DialogActions>
    </Dialog>
  );
};

export default SessionTimeoutDialog;
    Login or Signup to reply.
  2. 0

    To fix this issue you can use the ‘useRef’ hook to create a mutable reference that persits between re-renders.

    import React, { useState, useRef } from "react";
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material";

const SessionTimeoutDialog = () => {
  let [intervalStopCount, setIntervalStopCount] = useState(0);
  let [a, setA] = useState(0);
  const [o, setO] = useState(false);
  const intervalRef = useRef(null); // useRef for storing the interval reference

  function print5() {
    console.log("Testing print5 function");
  }

  const print7 = (e) => {
    console.log(e);
    e.preventDefault();
    console.log("Testing print7 function");
  };

  const stop = (e) => {
    setIntervalStopCount(++intervalStopCount);
    setO(false);
    clearInterval(intervalRef.current); // Clear the interval using the stored reference
    console.log("intervalStopCount", intervalStopCount + " " + o);
    if (a === 5) print5();
    if (a === 7) print7(e); // Call the print7 function with the event parameter
  };

  const start = (e) => {
    setO(true);
    console.log("Started", o);
    intervalRef.current = setInterval(() => {
      setA((prevA) => ++prevA); // Use the functional update to get the latest state value
      console.log(a);
      if (a === 10) setA(undefined); // Use undefined instead of void 0
      if (a === undefined) {
        console.log("a is undefined");
        setA(12);
      }
      if (a === 15) {
        setA(0);
        clearInterval(intervalRef.current); // Clear the interval using the stored reference
      }
    }, 500);
    console.log("Delaying by 0.5 seconds.");
  };

  return (
    <Dialog open={true}>
      <DialogTitle>Dialog</DialogTitle>
      <DialogContent>Hello!</DialogContent>
      <DialogActions>
        <Button onClick={start}>Start</Button>
        <Button onClick={stop}>Stop</Button>
      </DialogActions>
    </Dialog>
  );
};

export default SessionTimeoutDialog;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search