javascript - setInterval using Next.js and hooks - Stack Overflow

admin管理员组

文章数量:1344442

I'm trying to implement a loader using Next.js and hooks.

I have to do a fetch to check new data every 3 minutes and when that happens, I want to use a loading state.

I created a setLoading that starts at false and inside a setInterval pass to true, but I don't 'know why doesn't work.

Here is my code:

import React, { useState, useEffect } from "react";
import Context from "../../config/Context";
import { checkNewData } from "../../helper/index";

function Home() {

  const [contentLoading, setLoading] = useState(false);
  const data = context.events[0];

  useEffect(() => {
    setInterval(() => {
      if (data.live == false) {
        setLoading(true);
        checkNewData();
      }
      setLoading(false)
    }, 10000);

  return (
    <React.Fragment>
      {contentLoading ? <p>loading</p> : <p>no loading</p>
    </React.Fragment>
  );
}

export default Home;

I'm trying to implement a loader using Next.js and hooks.

I have to do a fetch to check new data every 3 minutes and when that happens, I want to use a loading state.

I created a setLoading that starts at false and inside a setInterval pass to true, but I don't 'know why doesn't work.

Here is my code:

import React, { useState, useEffect } from "react";
import Context from "../../config/Context";
import { checkNewData } from "../../helper/index";

function Home() {

  const [contentLoading, setLoading] = useState(false);
  const data = context.events[0];

  useEffect(() => {
    setInterval(() => {
      if (data.live == false) {
        setLoading(true);
        checkNewData();
      }
      setLoading(false)
    }, 10000);

  return (
    <React.Fragment>
      {contentLoading ? <p>loading</p> : <p>no loading</p>
    </React.Fragment>
  );
}

export default Home;

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Nov 28, 2022 at 20:02 Nicolas Bouvrette 4,80322 gold badges4444 silver badges6565 bronze badges asked Jan 16, 2020 at 23:51 larry_82larry_82 33911 gold badge44 silver badges1515 bronze badges 1

• 1 this is fundamentally wrong; you'll be setting a ton of intervals, because each time the ponent rerenders, that function you pass to useEffect is going to be called again. also, useEffect isn't for modifying state, it is called after each render. – r3wt Commented Jan 17, 2020 at 0:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Ok, so here You have working interval

(Every 3 sec calling api, and counts how many times it works(not needed just FYI)

In the function responsible for Api call you should turn on the loader - then every 3 seconds the data is called again

---

const Home = (props) => {

        const [loading, setLoading] = useState(false);
        const [check, setCheck] = useState(0)

        const callApi = () => {
            Here you should call your api + set loader
            if fetching(setLoading(true))
            if fetched(setLoading(false))
        }

        useEffect(() => {
            const id = setInterval(() => {
                callApi()
                setCheck(check + 1)
            }, 3000);
            return () => clearInterval(id);
        }, [check])

        return (
            <React.Fragment>
                {loading ? <p>Loading</p> : <p>No Loading</p>}
                <p>Times check execute {check}</p>
            </React.Fragment>
        );
    }

A better way to do this now will be to use a plugin like SWR. It will handle the data fetch and even the loading state seamlessly. Check the documentation here: https://swr.vercel.app

本文标签： javascriptsetInterval using Nextjs and hooksStack Overflow