infinite fetch data in useEffect in react.js

Question

Hi I'm trying to fetch data using personally built axios function named fetchMerchant.

I give dependencies in useEffect hook with fullData but it seems infinite looping after render and re render.

In my opinion, It should be rendered once after useEffect hooks because of dependency fullData given as a array.

How can I prevent infinite rendering after useEffect ?


  const BoardPage: FC =() => {
  const [fullData, setData] = useState<ContentType>({} as ContentType);
  const fetchData = async() => {
    try{
      const [,response] = await fetchMerchant();
      console.log(response);
      setData(response);
    } catch(error){
      console.log(error);
    }
  }
  useEffect(() => {
    console.log("board rendered");

    fetchData();
  },[fullData]) 
  return(
    <>
      <Board data={fullData} /> 
    </> 
  )
};

Does this answer your question? Add state and lifecycle methods to Function Components — wentjun
– wentjun, Commented Jun 5, 2020 at 2:14

Andrew Axton · Accepted Answer · 2020-06-05 01:54:13Z

1

It's running infinitely because of how your hook is setup. When you place something in the brackets at the end of the hook [fullData] it means that the hook will fire when that value changes. You don't want that to happen in this case because fetchData() inside of the hook will cause fullData to change thus firing the hook again. If you leave the brackets empty like so it should only fire once when the component is mounted

  useEffect(() => {
    console.log("board rendered");

    fetchData();
  },[])

answered Jun 5, 2020 at 1:54

Andrew Axton

1,0307 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

infinite fetch data in useEffect in react.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related