How do I call an Axios response once and without a button

Question

I am new to using react and Axios and I have created a get request, I can call it once with a button, however I don't want this button and instead want information to be displayed when the page loads/with the page so the user can see it straight away. But when calling my function once it gets called continuously and crashes the web browser and I don't understand why this is happening I have googled and I couldn't find anything. Here is the code that gets ran.

kitchen.js

import React from 'react';
import { Container } from 'react-bootstrap';
// import Axios from 'axios';
import { Link } from 'react-router-dom';
import GetFood from './getFood';

export default function Kitchen() {

    return(
        <Container>
        <div>
            <h1>This is the kitchen portal</h1>
            <Link to='/gettingfood'><button>Get Food</button></Link>
            <Link to="/addingfood"><button>Add food</button></Link>
            <Link to="/deletefood"><button>Delete Food</button></Link>
        </div>
        <GetFood/>
        </Container>
        );
}

GetFood.js

import React, { useState } from 'react';
import Axios from 'axios';

export default function GetFood() {

      const [responseData, setResponseData] = useState([])
    // fetches data
    async function fetchData(){
        await Axios.get("http://localhost:3001/getfood").then((response)=>{
            setResponseData(response.data);
            console.log(response.data);
            alert("Information received!")
        })
        .catch((error) => {
            console.log(error)
        })
    }
    fetchData();
    return (
        <div>
            <button onClick={fetchData}>Get</button>
            {responseData.map((val,key)=>{
                return (
                <div>
                    
                    <div id="data">
                        
                        <p>Item:{val.item}</p>
                        <p>Price:{val.price}</p>
                        
                    </div>
                </div>
            )
            })}
        </div>
    )
}

Answer 1

In React, functional components get called everytime they get rendered.

To create side-effects, like requesting data from an external source, you should use the useEffect hook.

This hook takes a function to execute and a dependency array, which defines when the supplied function gets called. If you specify an empty array, the function only gets called on the first render cycle. If you specify any variables, the function gets called on the first render cycle and when any of the specified variables change.

This should go instead of your call to fetchData():

useEffect(() => {
    fetchData();
}, []);