|
| 1 | +# React Suspense for Data Fetching |
| 2 | + |
| 3 | +## Prerequisites |
| 4 | +Please go to https://github.com/msd-code-academy/react-workshop and clone the project. Then inside the project run: |
| 5 | + |
| 6 | +``` |
| 7 | +git pull |
| 8 | +cd 10-suspense-for-data-fetching |
| 9 | +npm ci |
| 10 | +npm start |
| 11 | +``` |
| 12 | + |
| 13 | +We are using Parcel (https://parceljs.org/) for development server instead of webpack. It starts on port 1234. _(unfortunately hot reload sometimes doesn't work with parcel and react experimental, therefore is disabled)_. |
| 14 | + |
| 15 | +## Introduction |
| 16 | + |
| 17 | +- React Suspense for Data Fetching is pretty experimental, so there are some rough edges that you're going to be working through. |
| 18 | +- The APIs can change in the future. |
| 19 | +- Only Facebook is using it in production with Relay. |
| 20 | +- One of the things that I love about React in general, is that they're always applying the things that they're presenting to us internally at Facebook first, so they get some of the quirks worked out. |
| 21 | +- We're playing around with things, we're making little abstractions from things. Some of these things might be a bad idea, some of them might be good ideas. This is the whole point of this workshop, is to experiment with this, get familiar with the ideas and the concepts and the things that it enables, and then let you run off and play around with it, and give feedback back to the React team. |
| 22 | + |
| 23 | +## Approaches |
| 24 | + |
| 25 | +### Fetch-on-Render (not using Suspense) |
| 26 | + |
| 27 | +Start rendering components. Each of these components may trigger data fetching in their effects and life-cycle methods. This approach often leads to “waterfalls”. |
| 28 | + |
| 29 | +### Fetch-Then-Render (not using Suspense) |
| 30 | + |
| 31 | +Start fetching all the data for the next screen as early as possible. When the data is ready, render the new screen. We can’t do anything until the data arrives. |
| 32 | + |
| 33 | +1. Start fetching |
| 34 | +2. Finish fetching |
| 35 | +3. Start rendering |
| 36 | + |
| 37 | +### Render-as-You-Fetch (using Suspense) |
| 38 | + |
| 39 | +Start fetching all the required data for the next screen as early as possible, and start rendering the new screen immediately — before we get a network response. As data streams in, React retries rendering components that still need data until they’re all ready. |
| 40 | + |
| 41 | + 1. Start fetching |
| 42 | + 2. Start rendering |
| 43 | + 3. Finish fetching |
| 44 | + |
| 45 | +## Setup |
| 46 | + |
| 47 | +Install experimental React |
| 48 | +``` |
| 49 | +npm install react@experimental |
| 50 | +``` |
| 51 | + |
| 52 | +Use concurrent mode to enable experimental features. |
| 53 | + |
| 54 | +``` |
| 55 | +ReactDOM.createRoot(document.getElementById('root')).render(<App />); |
| 56 | +``` |
| 57 | + |
| 58 | +## Usage |
| 59 | + |
| 60 | +``` |
| 61 | +// This is not a Promise. It's a special object (resource) from our Suspense integration. |
| 62 | +const peopleResource = wrapPromise(fetchPeople); |
| 63 | +
|
| 64 | +const People = () => { |
| 65 | + // Try to read people list, although it might not have loaded yet |
| 66 | + const people = peopleResource.read(); |
| 67 | +
|
| 68 | + return ( |
| 69 | + <ul> |
| 70 | + {people.map((person, index) => ( |
| 71 | + <li key={index}>{person.name}</li> |
| 72 | + ))} |
| 73 | + </ul> |
| 74 | + ); |
| 75 | +}; |
| 76 | +
|
| 77 | +const Page = () => { |
| 78 | + return ( |
| 79 | + <React.Suspense fallback={<div>Loading people...</div>}> |
| 80 | + <People /> |
| 81 | + </React.Suspense> |
| 82 | + ); |
| 83 | +}; |
| 84 | +``` |
| 85 | + |
| 86 | +Here’s what happens when we render `<Page>` on the screen: |
| 87 | + |
| 88 | +- We’ve already kicked off the requests in `peopleResource`. It gave us a special “resource” instead of a Promise. In a realistic example, it would be provided by our data library’s Suspense integration, like Relay. |
| 89 | + |
| 90 | +- React tries to render `<Page>`. It returns `<People>` as children. |
| 91 | + |
| 92 | +- React tries to render `<People>`. It calls `peopleResource.read()`. That will throw a Promise, no further code in `<People>` is executed. None of the data is fetched yet, so this component “suspends”. React skips over it, and tries rendering other components in the tree. |
| 93 | + |
| 94 | +- There’s nothing left to try rendering. Because `<People>` suspended, React shows the closest `<Suspense>` fallback above it in the tree: "Loading people...". We’re done for now. |
| 95 | + |
| 96 | +- This resource object represents the data that isn’t there yet, but might eventually get loaded. When we call `read()`, we either get the data, or the component “suspends”. |
| 97 | + |
| 98 | +- When `peopleResource` is fetched, the `<People>` component will render successfully and we’ll no longer need the loading fallback. Eventually, we’ll get all the data, and there will be no fallbacks on the screen. |
| 99 | + |
| 100 | +## Errors |
| 101 | + |
| 102 | +When we need to handle our errors and display something useful to the user, then we can rely on an ErrorBoundary to catch that for us. This is the standard ErrorBoundary API that React has supported for quite some time. |
| 103 | + |
| 104 | +``` |
| 105 | +export default class ErrorBoundary extends React.Component { |
| 106 | + state = { error: null }; |
| 107 | +
|
| 108 | + static getDerivedStateFromError(error) { |
| 109 | + return { error }; |
| 110 | + } |
| 111 | +
|
| 112 | + componentDidCatch() { |
| 113 | + // log the error to the server |
| 114 | + } |
| 115 | +
|
| 116 | + render() { |
| 117 | + return this.state.error ? ( |
| 118 | + <div>Error: {this.state.error}</div> |
| 119 | + ) : ( |
| 120 | + this.props.children |
| 121 | + ); |
| 122 | + } |
| 123 | +} |
| 124 | +``` |
| 125 | + |
| 126 | +## Loading States |
| 127 | + |
| 128 | +`useTransition` allows components to avoid undesirable loading states by waiting for content to load before transitioning to the next screen. It also allows components to defer slower, data fetching updates until subsequent renders so that more crucial updates can be rendered immediately. |
| 129 | + |
| 130 | +The useTransition hook returns two values in an array. |
| 131 | + |
| 132 | +- startTransition is a function that takes a callback. We can use it to tell React which state we want to defer. |
| 133 | +- isPending is a boolean. It’s React’s way of informing us whether we’re waiting for the transition to finish. |
| 134 | + |
| 135 | + |
| 136 | +## Suspense List |
| 137 | + |
| 138 | +`<SuspenseList>` helps coordinate many components that can suspend by orchestrating the order in which these components are revealed to the user. |
| 139 | + |
| 140 | +SuspenseList takes two props: |
| 141 | + |
| 142 | +- revealOrder (forwards, backwards, together) defines the order in which the SuspenseList children should be revealed. |
| 143 | + |
| 144 | + - together reveals all of them when they’re ready instead of one by one. |
| 145 | + |
| 146 | +- tail (collapsed, hidden) dictates how unloaded items in a SuspenseList is shown. |
| 147 | + |
| 148 | + - By default, SuspenseList will show all fallbacks in the list. |
| 149 | + - collapsed shows only the next fallback in the list. |
| 150 | + - hidden doesn’t show any unloaded items. |
| 151 | + |
| 152 | +## Sources and Useful Links |
| 153 | +- https://reactjs.org/docs/concurrent-mode-suspense.html |
0 commit comments