5

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;
1
  • 1
    this is fundamentally wrong; you'll be setting a ton of intervals, because each time the component 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

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>
        );
    }
4
  • I try your example and never shows the Loading text..says "no loading"
    – larry_82
    Commented Jan 17, 2020 at 0:32
  • edited - the loading or not loading depends on state (if useData was true, there is loading) for now - it's changed - you should setLoading inside callApi function i think
    – Piotr Żak
    Commented Jan 17, 2020 at 0:37
  • OK, but my callAPI fn it is not in my Home, Is in a external file.. its a helper sou where I can put this: if fetching(setLoading(true)) if fetched(setLoading(false)), thanks!
    – larry_82
    Commented Jan 17, 2020 at 1:12
  • Ok, so, this decision based should based on your patterns & architecture. You can pass state by redux or lift state up || down. You can also import/export modules. Also if fetching & if fetched is pseudo code - describes when the function changing the state responsible for the loader should be called.
    – Piotr Żak
    Commented Jan 17, 2020 at 1:16
0

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

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.