How to render the api call only when there is some change

#In below code : I have used useEffect hook. In that I am calling apiData()(it has array of objects coming from api).
From API we are getting id, name, parent name, isActive. isActive is mapped with toggle which changes. I need to update the changes and retrive it. so I have used products. But because of this the whole data is called again and again. Is there any other way of solving this issue. #

const [products, setProducts] = useState([]);
const transformData = (data) => {
    return data.map((item) => ({
      id: item.structureId,
      name: item.name,
      parent: item.parentName,
      isActive: item.isActive,
    }));
  };
 useEffect(() => {
    apiData()
      .then((data) => {
        const transformedData = transformData(data);
        setProducts(transformedData);
      })
      .catch((error) => console.error("Error in fetching data:", error));
  }, [products, transformData]);