Problem with loop in React

Question

This is a common loop problem in React, which is basically making hundreds of flames in my Aces.

The component apparently isn’t inside the loop,.

component:

    import React, { useState, useMemo } from 'react';
import axios from 'axios';
import Header from "../../componentes/header";
import Footer from "../../componentes/footer";
import Upload from '../../componentes/Upload';
import AddCategory from "./addCategory";
import "./style.css";

import camera from "../../assets/camera.svg";

const user_id = localStorage.getItem('user_id');

export default function Galeria() {

    const [uploadDisplay, setUploadDisplay] = useState(false);
    const [categoryDisplay, setCategoryDisplay] = useState(false);

    const [listCategory, setListCategory] = useState([])

    const [images, setImages] = useState([]);



    useMemo(async () => {
        try {
            const response = await axios.get(`http://localhost:3001/api/image/${user_id}`);
            console.log(response)

            setImages(response.data);
        } catch (error) {
            console.log(error)
        }

        try {
            const response = await axios.get(`http://localhost:3001/api/category/${user_id}`);

            if (response.data.category === null) {
                setListCategory(['none']);
            } else {
                setListCategory(response.data.category);
            }

        } catch (error) {
            // Tratar erro
            console.log({ error })
        }
    })







    return (
        <>
            <Header />
            <div className="container-galeria">
                <header className="header-galeria">
                    <div className="header-title">
                        <h1 className="title">Galeria</h1>
                    </div>

                    <div className="header-upload">
                        <button className="btn-upload" onClick={event => setUploadDisplay(true)}> Adicionar imagem <img src={camera} alt="" /></button>
                    </div>

                    <div className="header-category">
                        <select className="btn-category">
                            <option value="">Categorias</option>
                            {listCategory ? listCategory.map((item, i) => (
                                <option key={i}>{item}</option>
                            )) : ''}
                        </select>
                    </div>

                    <div className="header-add-category">
                        <button className="btn-add-category" onClick={event => setCategoryDisplay(true)}>
                            +
                        </button>
                    </div>

                </header>

                <main className="main-galeria">
                    <ul>

                        {images ? images.map((item, i) => (

                            <li className="card-image" key={item._id}>
                                <div className="card-header">
                                    <img src={item.link} alt="" className="card-img" />
                                </div>
                                <div className="card-main">
                                    <div className="description"></div>
                                </div>
                            </li>
                        )) : 'Sem imagens no momento!'}


                    </ul>
                </main>
            </div>

            <AddCategory display={categoryDisplay} onClose={event => setCategoryDisplay(false)} />
            <Upload display={uploadDisplay} onClose={event => setUploadDisplay(false)} />
            <Footer />
        </>
    )
}

Answer 1

The problem is that you are using the useMemo with only one parameter, this will cause it to execute every time the component is rendered, to solve this problem you must define the variable that will be assisted as follows:

useMemo(() => {}, [variavelAssistida]);

If you want it to run only when the component is mounted, you should then use the useMemo as follows:

useMemo(() => {}, []);