Follow a Fetch
A request that starts in a component and ends as pixels. The network part is the short part; the parts that decide whether the interface is honest are cancellation, deduplication, the error branch, and what the user is looking at while they wait.
Every step below has a version that works on your machine. The ones that do not survive contact with a real network are the ones with no answer for a second request overtaking the first, a component that unmounted while the request was in flight, or a response that arrives for a query the user has already changed.
- One layer deeper
The interesting question is not what
fetchdoes but where it was called from, because that decides the lifecycle. A fetch started in an effect must be cancelled when that effect is torn down; a fetch started in a handler outlives the handler and can resolve into a component that no longer exists. Nothing in the API reminds you which one you have.What can go wrong here- — A request started on every render because its dependency identity changes every render.
- — Several components mounting at once and each requesting the same resource independently.
- — A request whose result is written into state that has since been unmounted or replaced.
The other two walks
Same page, different question. Each one crosses the loop at a different point.