How to use setInterval with useffect hook in Next.js?

user5CF5 0
Viewed 34

Counter is incrementing faster and randomly.

What is the right way to implement this in Next.js?

Here is my code:


import useSWR from "swr";
import { useEffect, useState, useRef } from "react";

const fetcher = (...args) => fetch(...args).then((res) => res.json());

let key = ""


export default function App() {

  const { data, error } = useSWR(`/api/getInfo?key=${key}`, fetcher);


  const [timer, setTimer] = useState(0)
  const [info, setInfo] = useState({})

 useEffect(async () => {

    const timerfn = window.setInterval(() => {
      setTimer((prevTime) => prevTime + 1);
    }, 1000);

    if (router.query) {
      key = router.query.id;
    }

    if (data) {
      
      console.log("Data fetched from server>>>>", data);
      setInfo(data.info);
    }

    return () => window.clearInterval(timerfn);
  }, [data, router]);


return (
    <>
    <p>Counter - {timer} </p>
    <p>Data from Server - {info} </p>
    </>

}
react-hooks next.js reactjs
1 Answers

I had to remove async in useEffect for it to work correctly.

 useEffect(() => {

    const timerfn = window.setInterval(() => {
      setTimer((prevTime) => prevTime + 1);
    }, 1000);

    if (router.query) {
      key = router.query.id;
    }

    if (data) {
      
      console.log("Data fetched from server>>>>", data);
      setInfo(data.info);
    }

    return () => window.clearInterval(timerfn);
  }, [data, router]);
user5CF50
Related