Using useQuery, setInterval and useEffect in the same component

Hello everyone! I'm pretty new in using react-query and I have a hopefully simple question:

I have my

useQuery

useQuery

function that is wrapped in a

getItems

getItems

function, then I have a

setInterval

setInterval

that updates a component state every second, to display the current hour. The fact that the state related to the interval is updated re-triggers the render of the page, so it re-triggers the

getItems

getItems

function every time. Fortunately useQuery is powerful, so it's not doing API call to backend. But it keeps re-fetching the

items

items

object, so everything using this object is re-rendered.
Before I was using useEffect for fetching the APIs, so the content of fetched items was kept, but now I've put my

getItems

getItems

ouside of useEffect.
What should I do to resolve this problem?

code:

const Dashboard = () => {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    let today = setInterval(() => setDate(new Date()), 1000);
    return function cleanup() {
      clearInterval(today);
    };
  }, []);

  // Obviously this line is re-triggered everytime "date" changes
  const {items} = useGetItems();

const Dashboard = () => {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    let today = setInterval(() => setDate(new Date()), 1000);
    return function cleanup() {
      clearInterval(today);
    };
  }, []);

  // Obviously this line is re-triggered everytime "date" changes
  const {items} = useGetItems();

TanStack•3y ago•

10 replies

foolish-indigo

Using useQuery, setInterval and useEffect in the same component

Hello everyone! I'm pretty new in using react-query and I have a hopefully simple question:

I have my

useQuery

useQuery

function that is wrapped in a

getItems

getItems

function, then I have a

setInterval

setInterval

that updates a component state every second, to display the current hour. The fact that the state related to the interval is updated re-triggers the render of the page, so it re-triggers the

getItems

getItems

function every time. Fortunately useQuery is powerful, so it's not doing API call to backend. But it keeps re-fetching the

items

items

object, so everything using this object is re-rendered.
Before I was using useEffect for fetching the APIs, so the content of fetched items was kept, but now I've put my

getItems

getItems

ouside of useEffect.
What should I do to resolve this problem?

code:

const Dashboard = () => {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    let today = setInterval(() => setDate(new Date()), 1000);
    return function cleanup() {
      clearInterval(today);
    };
  }, []);

  // Obviously this line is re-triggered everytime "date" changes
  const {items} = useGetItems();

const Dashboard = () => {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    let today = setInterval(() => setDate(new Date()), 1000);
    return function cleanup() {
      clearInterval(today);
    };
  }, []);

  // Obviously this line is re-triggered everytime "date" changes
  const {items} = useGetItems();

Using useQuery, setInterval and useEffect in the same component

Similar Threads

Using useQuery, setInterval and useEffect in the same component

Similar Threads

Similar Threads

Similar Threads