I want stop rendering in react-hooks - reactjs

Question

It's continuing to be rendered. I want to stop it.
Because of the problem, photos and text received from Api keep changing randomly.
I think useEffect is the problem. Please let me know because I am a beginner.
This is useFetch.jsx
import { useState, useEffect } from "react";
function useFetch(url) {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
async function fetchUrl() {
const response = await fetch(url);
const json = await response.json();
setData(json);
setLoading(false);
}
useEffect(() => {
fetchUrl();
});
return [data, loading];
}
export default useFetch;
This is Main.jsx
import React from "react";
import styled from "styled-components";
import useFetch from "./useFetch";
import "./font.css";
const url = "https://www.thecocktaildb.com/api/json/v1/1/random.php";
const Main = () => {
const [data, loading] = useFetch(url);
return (
<Wrapper>
<Header>My Cocktail Recipe</Header>
{loading ? (
"Loading..."
) : (
<>
{data.drinks.map(
({ idDrink, strDrink, strAlcoholic, strGlass, strDrinkThumb }) => (
<Container>
<img src={`${strDrinkThumb}`} alt="" />
<div key={`${idDrink}`}>{`${strDrink}`}</div>
</Container>
)
)}
</>
)}
<Search type="text" placeholder="검색하세요" val />
</Wrapper>
);
};
export default Main;

Answer 1

You must update useFetch.jsx:
import { useState, useEffect } from "react";
function useFetch(url) {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
async function fetchUrl() {
const response = await fetch(url);
const json = await response.json();
setData(json);
setLoading(false);
}
useEffect(() => {
fetchUrl();
}, []); //<--- Here
return [data, loading];
}
export default useFetch;
The problem is that the useEffect hook receives two arguments and you forgot the second argument, which is the effect's dependencies array.

Answer 2

useEffect(() => {
fetchUrl();
}, []);
return [data, loading];
}
Add Array Thanks Nick Parsons