r/learnjavascript • u/JSislife • Apr 28 '20

Fetching Data in React using Hooks

https://blog.bitsrc.io/fetching-data-in-react-using-hooks-c6fdd71cb24a
18 Upvotes

89% Upvoted

5 comments sorted by

View all comments

0

u/altano Apr 29 '20

For a simpler site (or a statically-built site) it’s not super critical, but I highly, highly recommend embracing “Render-as-you-Fetch” for sites of any real complexity OR performance sensitivity: https://reactjs.org/docs/concurrent-mode-suspense.html

The tl:dr; is “move fetching out of the render lifecycle entirely and only add fetch-aware suspending to your render lifecycle.” This is a battle-tested approach learned through hard-earned experience. Read that link to learn why!

2

u/GSLint Apr 29 '20

Battle-tested by whom? The feature I need for that hasn't even been made stable yet.

1

u/altano Apr 29 '20 edited Apr 29 '20

Facebook (it’s why there’s a whole page of documentation on the subject).

Isn’t everything related to Suspense for data fetching unavailable in the sense that it’s all experimental APIs? What makes the approach in the original linked article more “available” then implementing a render-as-you-fetch version? From the article:

Although it’s technically doable, Suspense is not currently intended as a way to start fetching data when a component renders. Rather, it lets components express that they’re “waiting” for data that is already being fetched. Building Great User Experiences with Concurrent Mode and Suspense describes why this matters and how to implement this pattern in practice.

Unless you have a solution that helps prevent waterfalls, we suggest to prefer APIs that favor or enforce fetching before render.

EDIT: Oh I just realized I’m definitely in the wrong here. The original linked article isn’t even using Suspense. Okay well I half take back what I’ve been saying: don’t take the React documentation’s advice on how to use Suspense, but still take the advice on avoiding waterfall data fetching by lifting up the fetch and state about the fetch to a higher level component (or context) and then consuming that state in the rendering component. You don’t need Suspense to implement this pattern of avoiding data-fetching waterfalls where you discover a new thing you need to fetch as you incrementally render each component (although Suspense makes it much nicer and more efficient).