CODEWITHSUNDEEP
javascriptreactjsaxios
yudhiesh
yudhiesh

Reputation: 6829

Too many re-renders when accessing data from an API in React

I am making a get request to an API that is linked to my database.

dataApi is a really big object with a lot of objects and arrays nested within it.

Some of the entries from the database are not having the full details that I need so I am filtering them to only show those with a length of > 5.

Now the issue is when I try to get the name of each entry which is split into either Tag1, Tag2 or Tag3.

Before this when I was accessing all the entries and getting the items within them there was no issue.

But when I try to filter them by the name and store the objects corresponding to that name in its state this issue arrises.

Edit: When I console.log(arr1) it shows all the data but the moment I set the state to it it causes the error.

// Data from all entries in database
const [dataApi, setDataApi] = useState();
// Data for each of the tags
const [tag1, setTag1] = useState();
const [tag2, setTag2] = useState();
const [tag3, setTag3] = useState();

useEffect(() => {
  axios.get(URL).then((res) => {
    const data = res.data;
    setDataApi(data);
  });
}, []);

const getTagDetails = data => {
    const arr1 = [];
    const arr2 = [];
    const arr3 = [];
    data &&
        data.forEach(d => {
            // Entries into the database which do not have any tag information
            // have a size of 5 and those with all the details have a size of 6
            const sizeOfObject = Object.keys(d).length;
            // Only need database items with all the details
            if (sizeOfObject > 5) {
                const name = d["tags"]["L"][0]["M"]["name"]["S"];
                // Split the data for the tags into their respective name
                // Will be used to set individual datasets for each tag
                if (name === "Tag1") {
                    arr1.push(d);
                }
                if (name === "Tag2") {
                    arr2.push(d);
                }
                if (name === "Tag3") {
                    arr3.push(d);
                }
            }
        });
    setTag1(arr1);
    setTag2(arr2);
    setTag3(arr3);
};
getTagDetails(dataApi);

Upvotes: 1

Views: 99

Answers (2)

Berke
Berke

Reputation: 760

I guess the problem is you call getTagDetails(dataApi) inside of file so it causes this infinite rendering problem

Instead remove getTagDetails and try to call this functions after API resolved.

useEffect(() => {
  axios.get(URL).then((res) => {
    const data = res.data;
    getTagDetails(data)
  });
}, []);

Upvotes: 3

andy mccullough
andy mccullough

Reputation: 9601

I think your problem is the way you have structured your getTagDetails function. Each time you render, you call getTagDetails() and the first thing you do is create a new array for each tag. When you call setTag with the new array, it will rerender. You'll probably want to move the getTagDetails logic into the effect so it only runs once on mount (or add a dependency to the dependency array if you need to update on new data)

Upvotes: 0

Related Questions