Get component infinite loop

[Salman-Sali]

<Get url="https://localhost:59773/api/categories">
        {(error, response, isLoading, makeRequest, axios) => {
          if (error) {
            return;
          } else if (isLoading) {
            return <div>Loading...</div>;
          } else if (response !== null) {
              console.log(rows);
            setRows(response.data.data.name.map(x=> createRow(x)));
            return;
          }
          return <div>Default message before request is made.</div>;
        }}
      </Get>

This is my code. console.log(rows); keeps on going. Is this by design or is it supposed to stop the loop on success?

[sheaivey]

You should never call a setter in a render function. Without seeing the full component I'm guessing that setRows() is a react managed state function. Calling it here will cause an infinite loop.

You should instead create a child success component that takes rows as a prop and do any mutations and filtering in there.