React simple fetch program run into an infinite loop

Question

I have a simple program which receives some JSON data from a node backend and set received data into state. The problem is it reset state infinite times, creating an infinite rendering.

Here is the JSON data

[
  {
    "id": 1,
    "name": "Product 1",
    "category": "C1",
    "price": "100"
  },
  {
    "id": 2,
    "name": "Product 2",
    "category": "C1",
    "price": "80"
  },
  {
    "id": 3,
    "name": "Product 3",
    "category": "C3",
    "price": "120"
  }
]

Here is the react program.

import React, { useState } from 'react'

const MainApp = () => {
    const [products, setProducts] = useState([])

    fetch("http://localhost:5000/products")
        .then((res) => res.json())
        .then((res) => {setProducts(res)})
        .catch((err) => console.error(err))
    
    console.log("Products:",products) //This keep getting logged forever.

    return (
        <h1>Test</h1>
    )
}

export default MainApp

What have I done wrong?

you keep calling fetch everytime the component is re-rendered, when you update a state in React, the component gets re-rendered, and everything in the whole function is called again, you should put fetch into a useEffect hook with an empty dependency to make sure it is only called once at the initial render of the component. You can read about useEffect here: reactjs.org/docs/hooks-effect.html — Israel Obanijesu
– Israel Obanijesu, Commented Mar 14, 2021 at 7:44

user3882 · Accepted Answer · 2021-03-14 07:47:01Z

5

The fetch is continuously performed on every render of MainApp. Consider using an effect to solve this.

answered Mar 14, 2021 at 7:47

user3882

1281 silver badge4 bronze badges

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

1 Comment

JobHunter69 Over a year ago

why is mainapp rerendering so much?

Vakhtang Nodadze · Accepted Answer · 2021-03-14 08:09:31Z

5

You should only call fetch when components mounts. Since you are using hooks, you should use `

useEffect(()=> {
fetch("http://localhost:5000/products")
        .then((res) => res.json())
        .then((res) => {setProducts(res)})
        .catch((err) => console.error(err))
}, [])

`

What you are doing right now, is calling fetch on every render. Imagine it like this. You are rendering the component, during that you are fetching something and updating the state. When the state updates, it rerenders the components and you are going on an infinite loop.

answered Mar 14, 2021 at 8:09

Vakhtang Nodadze

961 silver badge4 bronze badges

Comments

Belhadjer Samir · Accepted Answer · 2021-03-14 08:05:46Z

0

the problem is in {setProducts(res)} this will update the state and re-render the component then call the fetch function second time and so on

answered Mar 14, 2021 at 8:05

Belhadjer Samir

1,6999 silver badges16 bronze badges

Collectives™ on Stack Overflow

React simple fetch program run into an infinite loop

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related