'When data is fetched and/or rendered, react triggers page refresh and all calls are remade

I'm not sure exactly what is causing the issue, but I have a situation as follows:

Pseudocode below:

export default function TryThis() {

const data = fetch(url1)
const data2 = fetch(url2)
const data3 = fetch(url3)

let [try, setTry] = useState(data[0])

return(
    <div>
        <Filter data=try change=setTry/>
        <Table data={data} />
    </div>
)
}

Whenever TryThis runs, the URLs are fetched multiple times. My assumption is it might be linked to useState or something else react is doing under the hood because even if data not related to the state changes, many things will rerun when data is updated from the API.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source