useSWR modified returned data causing infinite loop inside useEffect

[RSchneider94]

Hello community!

I'm using SWR for a while in a project and working pretty fine. However, today I've stumbled upon this problem. What I'm doing:

This is the function which I use to call the useSWR:

export function useUserPortfolios(userToken) {
  const swrKey = userToken ? [portfoliosPath, userToken] : null;
  const { data, error } = useSWR(swrKey, fetchUserPortfolios);

  const userPortfolios = {};
  const companyPortfolios = {};
  if (data)
    Object.entries(data).forEach(([key, value]) => {
      if (Object.prototype.hasOwnProperty.call(value, 'organization')) {
        companyPortfolios[key] = value;
      } else {
        userPortfolios[key] = value;
      }
    });

  const allPortfolios = { ...userPortfolios, ...companyPortfolios };

  return {
    userPortfolios,
    companyPortfolios,
    allPortfolios,
    isLoading: !error && !data,
    isError: error,
    mutate: () => mutate(swrKey),
  };
}

which calls the following fetcher function:

export function fetchUserPortfolios(
  path = portfoliosPath,
  userToken,
  from,
  to,
  peerIdToCompare
) {
  return API.get(path, {
    headers: {
      Authorization: `Bearer ${userToken}`,
    },
    params: {
      from,
      to,
      peerIdToCompare,
    },
  }).then((data) => data);
}

And I'm calling it here (inside functional component):

const {
  allPortfolios,
  isLoading: isLoadingPortfolios,
  isError: isErrorPortfolios,
} = useUserPortfolios(userToken);

const userPortfoliosArray = toArray(allPortfolios);
const userHasSomePortfolio =
  userPortfoliosArray && userPortfoliosArray.length > 0;

and the allPortfolios I'm using inside a useEffect function (which is also used as dependency of it):

useEffect(() => {
    let mounted = true;

    if (
      mounted &&
      isCvmCategoriesReady &&
      allPortfolios &&
      selectedPortfolio.portfolioId
    ) {
      const { portfolioId } = selectedPortfolio;
      const portfolioSettings = allPortfolios[portfolioId].settings;

      if (portfolioSettings) {
        notificationsTypes.forEach((type) => {
          if (Object.prototype.hasOwnProperty.call(portfolioSettings, type)) {
            const { payloadKeys } = notificationsInitialState[type];
            if (payloadKeys.length > 0) {
              payloadKeys.forEach((pKey) => {
                if (
                  Object.prototype.hasOwnProperty.call(portfolioSettings, pKey)
                ) {
                  setNotifications((currState) => ({
                    ...currState,
                    [type]: {
                      ...currState[type],
                      active: portfolioSettings[type],
                      payload: {
                        ...currState[type].payload,
                        [pKey]: portfolioSettings[pKey],
                      },
                    },
                  }));
                }
              });
            } else {
              setNotifications((currState) => ({
                ...currState,
                [type]: {
                  ...currState[type],
                  active: portfolioSettings[type],
                },
              }));
            }
          }
        });
      }
    }

    return () => {
      mounted = false;
    };
  }, [allPortfolios, isCvmCategoriesReady, selectedPortfolio]);

and here is where I'm currently having trouble. I don't know why exactly (this is the first time I have it with SWR) but it's getting updated/called again every time, and with that, causing useEffect to run again and again and you know, infinite loop, crash. But why? I have tried to remove it from dependency array in order to check and yes, it was the SWR. Also tried to give SWR some options in order to not fetch on focus, etc. but even though is breaking my app.

Any ideas?

Thanks!

[RSchneider94]

I was able to fix it wrapping the SWR into a custom hook and seems to be working fine. Any thoughts/something that could get problem regarding SWR on the code?

export function useUserPortfolios(userToken) {
  const [portfolios, setPortfolios] = useState({
    userPortfolios: {},
    companyPortfolios: {},
  });

  const swrKey = userToken ? [portfoliosPath, userToken] : null;
  const { data, error } = useSWR(swrKey, fetchUserPortfolios);

  useEffect(() => {
    if (data) {
      const userPortfolios = {};
      const companyPortfolios = {};

      Object.entries(data).forEach(([key, value]) => {
        if (Object.prototype.hasOwnProperty.call(value, 'organization')) {
          companyPortfolios[key] = value;
        } else {
          userPortfolios[key] = value;
        }
      });

      setPortfolios({ userPortfolios, companyPortfolios });
    }
  }, [data]);

  return {
    portfolios,
    isLoading: !error && !portfolios,
    isError: error,
    mutate: () => mutate(swrKey),
  };
}

[RSchneider94]

crazy, suddenly it started to have the same infinite loop again... so, still no solution :(