react - Infiinite loop when sending axios request (useState problem?)

Every time the state updates, your component function is run again. Because you are calling sendRequest each time the function is called, and then updating the state based on it, you get an endless cycle of rerenders.

You shouldn't be performing side effects - such as API calls - inside the main body of your function anyway. (If you've previously used class components in React, you should think of your function component as the equivalent of render, which just computes the JSX output from the component's current props and state, and should perform no side effects.) When using hooks, you have the useEffect hook for things like this. And in particular, its second argument is an array of variables, for which the effect will only run when one of those values has changed since the last render. This is how you can prevent the effect running on each render - which you must prevent here to stop the infinite updates.

As far as I can tell, this request doesn't depend on any internal state, so it should probably only run when the component first renders. In that case, pass the empty array as second argument.

In short, you should rewrite your code like this:

useEffect(() => sendRequest().then(folder => {
  //loop through each item and append a JSX element into the array
  for (let i=0;i <folder.length;i++) {
    tmpFolder.push(<Folder tags={folder[i].tags} name={folder[i].name} description={folder[i].description} date={folder[i].date_created[0]} tagOne={folder[i].tags[0]} tagTwo={folder[i].tags[1]} tagThree={folder[i].tags[2]} tagRest={folder[i].tags.length - 3} />)
  }
  setFolder_JSX(prev => tmpFolder)
}).catch(err => console.log(err)), []);

It appears as though you have the fetch logic out in the open in the functional component body, something like:

const MyComponent = () => {
  let tmpFolder = [];
  const [folder_JSX, setFolder_JSX] = useState([]);

  const sendRequest = () => {
    return axios.get(`sample_url`).then(response => {
      return response.data;
    });
  };

  sendRequest() // <-- invoked each render cycle
    .then(folder => {
      //loop through each item and append a JSX element into the array
      for (let i = 0; i < folder.length; i++) {
        tmpFolder.push(
          <Folder
            tags={folder[i].tags}
            name={folder[i].name}
            description={folder[i].description}
            date={folder[i].date_created[0]}
            tagOne={folder[i].tags[0]}
            tagTwo={folder[i].tags[1]}
            tagThree={folder[i].tags[2]}
            tagRest={folder[i].tags.length - 3}
          />
        );
      }
      setFolder_JSX(prev => tmpFolder); // <-- state update triggers rerender
    })
    .catch(err => console.log(err));

  ...
};

If this is the case then sendRequest is invoked each render cycle and ultimately updates component state which triggers another render, thus the infinite cycle.

Perhaps you wanted to only fetch data when the component mounts, you can use an effect to do any side-effects:

const MyComponent = () => {
  let tmpFolder = [];
  const [folder_JSX, setFolder_JSX] = useState([]);

  useEffect(() => {
    const sendRequest = () => {
      return axios.get(`sample_url`).then(response => {
        return response.data;
      });
    };
  
    sendRequest()
      .then(folder => {
        //loop through each item and append a JSX element into the array
        for (let i = 0; i < folder.length; i++) {
          tmpFolder.push(
            <Folder
              tags={folder[i].tags}
              name={folder[i].name}
              description={folder[i].description}
              date={folder[i].date_created[0]}
              tagOne={folder[i].tags[0]}
              tagTwo={folder[i].tags[1]}
              tagThree={folder[i].tags[2]}
              tagRest={folder[i].tags.length - 3}
            />
          );
        }
        setFolder_JSX(prev => tmpFolder);
      })
      .catch(err => console.log(err));
  }, []); // <-- empty dependency to run once on component mount

  ...
};