I try this code and get an infinite loop

request.jsx

import { useEffect, useState } from 'react';
import axios from 'axios';

export async function getCategories() {
    const [categories,setCategories]= useState();
    try {
       await useEffect(() => {
            axios.get("http://localhost:3001/api/req/categories",).then(function (res) {
                const response = JSON.stringify(res.data)
                setCategories(response);
            });
    
            
   
    
        }, [])
            return categorias;
    } catch (error) {
        console.log(error);
    }

}

item_new.jsx

import { getCategories } from ".request";
import { useEffect, useState } from "react";
const [categorieSelect, setCategorieSelect] = useState();

getCategories().then(response => {
    
    try {
      const res = JSON.parse(response);
     
      setCategorieSelect(res)

    } catch (error) {
      console.log(error)
    }
 console.log(categorieSelect)  // infinite loop
  })

I also try to put a useEffect and get this error

react-dom.development.js:15408 Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.<

import { getCategories } from ".request";
import { useEffect, useState } from "react";
const [categorieSelect, setCategorieSelect] = useState();

getCategories().then(response => {
    
    try {
      useEffect(()=>{   
      
       const res = JSON.parse(response);
       setCategorieSelect(res)

   },[])
   

    } catch (error) {
      console.log(error)
    }
 console.log(categorieSelect)  // infinite loop
  })

I try this code and get an infinite loop

request.jsx

import { useEffect, useState } from 'react';
import axios from 'axios';

export async function getCategories() {
    const [categories,setCategories]= useState();
    try {
       await useEffect(() => {
            axios.get("http://localhost:3001/api/req/categories",).then(function (res) {
                const response = JSON.stringify(res.data)
                setCategories(response);
            });
    
            
   
    
        }, [])
            return categorias;
    } catch (error) {
        console.log(error);
    }

}

item_new.jsx

import { getCategories } from ".request";
import { useEffect, useState } from "react";
const [categorieSelect, setCategorieSelect] = useState();

getCategories().then(response => {
    
    try {
      const res = JSON.parse(response);
     
      setCategorieSelect(res)

    } catch (error) {
      console.log(error)
    }
 console.log(categorieSelect)  // infinite loop
  })

I also try to put a useEffect and get this error

react-dom.development.js:15408 Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs./link/invalid-hook-call for tips about how to debug and fix this problem.<

import { getCategories } from ".request";
import { useEffect, useState } from "react";
const [categorieSelect, setCategorieSelect] = useState();

getCategories().then(response => {
    
    try {
      useEffect(()=>{   
      
       const res = JSON.parse(response);
       setCategorieSelect(res)

   },[])
   

    } catch (error) {
      console.log(error)
    }
 console.log(categorieSelect)  // infinite loop
  })

• javascript
• reactjs
• react-hooks
• axios

1 Answer 1

You've drastically over-complicated this. I don't know what examples you're following, but it looks like you're trying to use every possible operation you know of in every function you write. Don't.

If getCategories() makes an AJAX request and returns a response then just do that. There's no reason to involve anything about React in this. For example:

export async function getCategories() {
  const res = await axios.get("http://localhost:3001/api/req/categories");
  return res.data;
}

Then use it in your React component to fetch data and assign that data to state:

const [categorieSelect, setCategorieSelect] = useState();

useEffect(() => {
  getCategories().then(cat => setCategorieSelect(cat));
}, []);

This useEffect will execute once when the component first loads, due to its empty dependency array.