Infinite loop using useEffect, useState and useSWR

const [ useStateVar, setUseStateVar ] = useState({})
const { data } = useSWR("demo/data", fetcher, {refreshInterval: 1000})
useEffect(() => {setUseStateVar(useStatevar+1)}, [data])

I believe the above code runs like this:
When the data first update at a 1s frequent, it triggers the useEffect() to update useStateVar using setUseStateVar, once the useStatevar is updated, the data update again, when the data updated, it triggers the useEffect(), so it created an infinite loop to the browser to update the value and hit the maximum.

I aim to get the updated data using useSWR() and update some variables, and reload the component while data is updated.

How can I achieve it without creating an infinite loop?

To prevent the infinite loop in your code, you can use the useRef hook to keep track of the previous value of the data fetched by useSWR. This way, you can compare the current data with the previous value and conditionally update the useStateVar only when the data changes. Here's how you can achieve it:

import { useState, useEffect, useRef } from 'react';
import useSWR from 'swr';
const Component = () => {
  const [useStateVar, setUseStateVar] = useState({});
  const { data } = useSWR("demo/data", fetcher, { refreshInterval: 1000 });
  // Create a ref to keep track of the previous data value
  const prevDataRef = useRef();
  useEffect(() => {
    // Check if prevDataRef.current exists and if the data has changed
    if (prevDataRef.current && data !== prevDataRef.current) {
      // Update the useStateVar only when the data changes
      setUseStateVar(prevState => {
        // Modify the state based on the new data
        // For example, you can merge the new data with the previous state
        return { ...prevState, ...data };
      });
    }
    // Update the prevDataRef with the current data value for the next comparison
    prevDataRef.current = data;
  }, [data]);
  // Rest of your component code
  return (
    // JSX elements
  );
}

the useRef hook is to create prevDataRef, which holds the previous value of data. Inside the useEffect hook, we check if the prevDataRef.current exists (i.e., it is not null or undefined) and if the current data value is different from the previous one.

If there's a change in the data, we update the useStateVar state by merging the new data with the previous state (you can modify this part based on your specific use case).

comparing the current and previous data values, we ensure that the useStateVar state is only updated when there's a genuine change in the data fetched by useSWR, avoiding the infinite loop issue.