如何解决 React 渲染问题？

Question

I have a very simple component that fetches data and do some easy computation. Every time the page refreshes the component renders, the value will change. I have also tried clearing the cache thinking it might be an issue but it didn't solve the problem. Thank you for your help!

I have tried removing and I get a warning with a message suggesting to add difference but even without it, it still behaves the same on every single render. I use difference value like this

const [revenue, setRevenue] = useState([]);
  const [difference, setDifference] = useState(0);

  useEffect(() => {
    const getRevenue = async () => {
      try {
        const res = await adminRequest.get("/orders/incomestats");
        setRevenue(res.data);
        console.log(res.data);
        setDifference((res.data[1].total * 100) / (res.data[0].total - 100));
        console.log(difference);
      } catch (error) {
        console.log(error);
      }
    };
    getRevenue();
  }, [difference]);

Here is where I use the value difference

%{Math.floor(difference)}
            {difference < 0 ? (
              <ArrowDownward />
            ) : (
              <ArrowUpward />
            )}

Answer 1

Each state change generates the component rendering. You are listening to the "difference" variable change and changing it again with setDifference, creating a loop.

This

useEffect(()=>{
   setState(something)
},[state])

Use

useEffect(()=>{
   setState(something)
},[])