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;

If you only want your effect to run once, add a dependency array: `useEffect(() => {...}, [])` as a second argument to useEffect — Nick Parsons, Dec 30 '20 at 02:49
Does this answer your question? [Can I set state inside a useEffect hook](https://stackoverflow.com/questions/53715465/can-i-set-state-inside-a-useeffect-hook) — Nick Parsons, Dec 30 '20 at 02:51

score 2 · Accepted Answer · answered Dec 30 '20 at 04:04

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.

score 0 · Answer 2 · answered Dec 30 '20 at 02:52

0

useEffect(() => {
    fetchUrl();
  }, []);
  return [data, loading];
}

Add Array Thanks Nick Parsons

answered Dec 30 '20 at 02:52

eeez kim

175
1
3
15

I want stop rendering in react-hooks

2 Answers2