react.js – Merge into an object from two different API calls

I’m working on an app to compare SDKS (their churn and acquisiton rates). I have created an API with two separate endpoints.

The first, compares one sdk to ther other and spits out that data for each sdk.

The second, simply gets general information about a single sdk.

I’m merging these objects into one, so that all information regarding a single SDK can be found.

Problems I previously had, and might still come up (hopefully fixed by now): When setting the object at the end with setAllSdksInfo(objCopy) there was a problem in which it would not set it ok.

I’m also getting an ESLint warning which states "Function declared in a loop contains unsafe references to variable(s) 'objCopy', 'objCopy', 'objCopy', 'objCopy', 'objCopy', 'objCopy', 'objCopy'" but that doesn’t seem to be causing any problems.

import React, { useEffect } from "react";
import MatrixSquare from "./MatrixSquare";

function Matrix({ selectedSdks, allSdksInfo, setAllSdksInfo, showMatrix, setShowMatrix }) {

  useEffect(() => {
    (async () => {
      const selectedSdksKeys = Object.keys(selectedSdks);
      if (!selectedSdksKeys.length) return;

      setShowMatrix(false);

      let comparedCount = 0;

      const notComparedKeys = ();

      selectedSdksKeys.forEach((key, i) => {
        for (let j = i + 1; j < selectedSdksKeys.length; j++) {
          if ( allSdksInfo?.(key)?.("churned_to")?.hasOwnProperty( selectedSdksKeys(j))) {
            comparedCount += 1;
            if (comparedCount === 3) {
              setShowMatrix(true);
            }
          } else {
            notComparedKeys.push((key, selectedSdksKeys(j)));
          }
        }
      });

      let objCopy = Object.assign({}, allSdksInfo);

      for (let i = 0; i < notComparedKeys.length; i++) {
        await fetch( `/api/sdk/churn?sdk1_id=${notComparedKeys(i)(0)}&sdk2_id=${notComparedKeys(i)(1)}`)
          .then((res) => res.json())
          .then((res) => {
            const copyPreviousObj = Object.assign({}, objCopy);
            objCopy = { ...objCopy, ...res };
            const resKeys = Object.keys(res);

            resKeys.forEach((key) => {
              const new_churned_to = objCopy(key)("churned_to");
              const new_acquired_from = objCopy(key)("acquired_from");

              if (copyPreviousObj(key)) {
                objCopy(key)("churned_to") = {
                  ...new_churned_to,
                  ...copyPreviousObj(key)("churned_to"),
                };
                objCopy(key)("acquired_from") = {
                  ...new_acquired_from,
                  ...copyPreviousObj(key)("acquired_from"),
                };
              }
            });
          });
      }

      selectedSdksKeys.forEach(async (id, i) => {
        if (allSdksInfo(id)?.("num_installed_apps")) return;
        const res = await fetch(`/api/sdk/general_info?sdk_id=${id}`);
        const data = await res.json();
        objCopy(id)("num_installed_apps") = data("num_installed_apps");
        objCopy(id)("acquired_total") = data("acquired_total");
        objCopy(id)("churned_total") = data("churned_total");
      });

      setAllSdksInfo(objCopy);
      setShowMatrix(true);
    })();
  }, (selectedSdks));