React UseEffect - 仅在数据更改时执行

Question

I know Functions passed to useEffect are executed on every component rendering, i am in a situation where i need useEffect hook not run on initial render but only when these data are rendered => home.matchsPlayed, home.winHome

This is my actual situation

  useEffect(() => {
    setData(prev =>
      prev.concat([
        {
          day: home.matchsPlayed,
          [selectedHomeName]: home.winHome
        }
      ])
    );
  },[home.matchsPlayed, home.winHome, selectedHomeName]);

  console.log('data', [data]);

Data array looks like this

I have seen a solution where i can make use of useRef to keep track of initialMount with useEffect

So i changed to

const isInitialMount = useRef(true);

  useEffect(() => {
    if (isInitialMount.current) {
       isInitialMount.current = undefined;
    } else {
      setData(prev =>
        prev.concat([
          {
            day: home.matchsPlayed,
            [selectedHomeName]: hhome.winHome
          }
        ])
      );
    }
  },[home.matchsPlayed, home.winHome, selectedHomeName]);

The array has now 1 object less undefined which is slightly better

I want my data array being like this, without the first 3 objects undefined because the data are not presented in the initial renderings. How can i achieve it?

  Data: [
    {day:22, Sao Paulo: -8},
    {day:16, Sao Paulo: -2},
    {day:27,  Sao Paulo: -9}
  ],

I have reproduced the case here => https://codesandbox.io/s/cool-wind-sism9 (In order to see the demo a chrome extension to unblock the CORS has to be installed, i use CORS Unblock)

Answer 1

  useEffect(() => {
    if (!home.matchsPlayed || !home.totalCal || !selectedHomeName) {
      return;
    }

    setData(prev =>
      prev.concat([
        {
          day: home.matchsPlayed,
          [selectedHomeName]: home.totalCal
        }
      ])
    );
  },[home.matchsPlayed, home.totalCal, selectedHomeName]);

Wouldn't that do it?