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

• 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

2 Answers 2

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