I want stop rendering in react-hooks

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.