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;