Infinite loop on axios call, React

Question

Recently I've been working in a personal project and there's some thing that is happening and I don't know why. When I'm trying to do a call to a function to get a value it keeps looping as if there were infinite objects in an array. I'm trying tu cut this process but I couldn't at this point.

Can you please tell me what I'm doing wrong? Thanks in advance

Here is my code

const ModalBodyUpdatePreparacion: React.FC<modalBodyFormProps> = (props: modalBodyFormProps) => {

const[stockPreparaciones, setStockPreparaciones] = useState<any[]>([]);
const[nombreIng, setNombreIng] = useState('');

useEffect(() => { //I'm using this useEffect hook to obtain the values of my array, which has just two objects at the moment
    getPreparaciones();
},[stockPreparaciones.length]);

const getPreparaciones = () => {
    console.log(props.objectS);
    axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + props.objectS)
    .then(result => {
        console.log(result);
        setStockPreparaciones(result.data.preparaciones);
        console.log(stockPreparaciones);
    }).catch(console.log); 
}

function getNombre(e:any){ //This is the function that I'm calling
    axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + e)
    .then(result => {
        console.log('busqueda del nombre');
        console.log(result);
        setNombreIng(result.data.nombre);
        console.log(nombreIng);
    });
    console.log(nombreIng);
    return nombreIng;
}

return(
    <div>
        <Container>
            <br></br>
            <Grid columns={3} divided>
                <Grid.Row>
                    <Grid.Column>
                        <label>Nombre del ingrediente:</label>
                    </Grid.Column>
                    <Grid.Column>
                        <label>Cantidad:</label>
                    </Grid.Column>
                    <Grid.Column>
                        <label>Acciones:</label>
                    </Grid.Column>
                </Grid.Row>
                {
                    stockPreparaciones.map(st => ( //Here is where I'm going through my array, it's just about two objects
                        <Grid.Row key={st.id}>
                            <Grid.Column>
                                <Input size='small' placeholder='Nombre ingrediente' value={getNombre(st.codigo_ingrediente)} disabled  /> //Here is were I'm calling the function to get a value
                            </Grid.Column>
                            <Grid.Column>
                                <Input size='small' placeholder='Cantidad*'  value={st.cantidadxpreparacion} disabled/>
                            </Grid.Column>
                            <Grid.Column>
                            <Button variant="secondary" onClick={props.handleSubmit}>
                                Eliminar
                            </Button>
                            </Grid.Column>
                        </Grid.Row>
                    ))
                }
            </Grid>
        </Container>
        <br></br>
        <Button variant="secondary" onClick={props.handleSubmit}>
            Cancelar
        </Button>
        <Button variant="secondary" >
            Agregar preparacion
        </Button>
    </div>
);}

The thing is that however I'm trying to get a unique value, it keeps render the data... so it's kinda crazy.

This is an example of my console:

Example of the console running the function 'getNombre'

Thank you

Answer 1

Issue is :

1. callling function on render :

// this will call the function on each render 
value={getNombre(st.codigo_ingrediente)}

2. getNombre Function cause re-render via setNombreIng:

function getNombre(e:any){ //This is the function that I'm calling
    axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + e)
    .then(result => {
        console.log('busqueda del nombre');
        console.log(result);
        setNombreIng(result.data.nombre); // <--- Setting state will make re- render
        console.log(nombreIng);
    });
    console.log(nombreIng);
    return nombreIng;
}

Result : Infinte loop

---

Solution :

I've made few changes :

you can call getNombre from getPreparaciones as it is dependent on it , then you can directly use the value and save it first api's data

So there will no need of a second state nombreIng

const[stockPreparaciones, setStockPreparaciones] = useState<any[]>([]);
// const[nombreIng, setNombreIng] = useState(''); // <--- NO NEED OF THIS NOW

const getPreparaciones = async () => {
    try {
        const result = await axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + props.objectS);
        let data = result.data.preparaciones
        for(let i = 0 ; i< data.length ; i++ ) {
            data[i].nombreIng = await getNombre(data[i].codigo_ingrediente); // <--- WE'LL STORE IT INSIDE MAIN DATA
        }
        setStockPreparaciones(data);
    } catch(err) {
        catch(console.log); 
    }
}

const getNombre = async (e:any) => {
    const result= await axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + e)
    return result.data.nombre;
}

// now you can directly access this with `st.nombreIng`
<Input size='small' placeholder='Nombre ingrediente' value={st.nombreIng} disabled  />