Multiple XHR requests from React Component

Question

Given the following React app, it will make two requests to the jsonplaceholder API, why does this happen and can it be prevented so it only performs one?

import { useMemo } from "react"; class Client { constructor() { this.setup() } setup = async() => { console.log("setup") await fetch("https://jsonplaceholder.typicode.com/todos/1") } } export default function App() { useMemo(() => { return new Client() }, []) return null }

https://codesandbox.io/s/currying-water-91t3in?file=/src/App.js

gryevns · Accepted Answer · 2022-03-19 09:31:17Z

This is caused when using strict mode as react invokes certain functions twice . It also patches console.log on the second run which makes debugging hard. More information here: https://reactjs.org/docs/strict-mode.html

Collectives™ on Stack Overflow

Multiple XHR requests from React Component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related