( Magical land of React Suspense, Concurrent React and React.lazy API) in his talk “ ” at JSConf Iceland 2018 said: Dan Abramov Beyond React 16 We’ve built a generic way to ensure that high-priority updates like user input don’t get blocked by rendering low-priority updates. Let’s understand what this means and also get introduced to some of the new features coming to React, some of which have been released as part of the latest stable release and some of them are still in mode and it’s quite possible that the implementation of the api might change over time. unstable Things we got introduced to in the talk: Suspense Defer set state with react-cache scheduler Concurrent React ModeCode splitting with React.lazy Suspense React.Suspense in simple words means we can suspend the rendering of our component or components until some condition is met( for example data from an endpoint or a resource is loaded) and until then show a fallback(for-example a spinner) Why do we need this? If suspense is all about just showing a spinner till data loads, can we not do that today as well? I mean we have been doing the same thing since a long time by keeping a loading state as true and till the data is not fetched we show a spinner and when data fetch is complete we set the loading state to false. An example of how we have been currently doing it: state = { : , : } loading true data null So the question is if it can be done even today then what is it that suspense is bringing into our codebase? The answer to that is yes it’s still possible to use loading state and play around with it to show/hide the spinner but as the application grows complex this becomes tedious to manage. For example:- <RestaurantDetail> <RestaurantAlbums /> <RestaurantReviews>
        <RestaurantReviewDetail>
        <RestaurantReviewDetail>
        <RestaurantReviewDetail>
        {...}
    </RestaurantReviews>
</RestaurantDetail> < /> RestaurantInfo In the above example we can have 4 api calls: 1) component making one api call for getting basic information about a Restaurant <RestaurantInfo /> 2) api to fetch all the images of that Restaurant 3) api to fetch all reviews 4) api to fetch some details around those individual reviews like comments, likes etc. <RestaurantAlbums /> <RestaurantReviews /> <RestaurantReviewDetail /> The problem with the above code structure is that we need to somehow manage the loading state and data fetching states for all those api calls that are happening above. So what is the solution? For the above problem we have multiple solutions which can be as follows: Delegate all api calling logic into the parent container and let all of them wait until all data fetching is complete and pass data to child components as props. The problem with this approach is now the parent needs to be aware of all api calls which are needed by child components and also maintain a complex state for all these api responses. Make all the child components smart/stateful components and let each of them manage their own and states. This is complex since converting a stateless component to a stateful component is not something we would want to do. loading data The third solution is using Suspense With Suspense it works differently. How? With suspense and react-cache, we can use our same functional component and still fetch data from it. The difference here being instead of fetching data from a lifecycle method like we will fetch this data from inside of . componentDidMount render How is this even possible? This becomes possible using react-cache and suspense Now a word of caution, is still unstable and it’s implementation or api might change over time. react-cache An example of how to use react-cache to create a restaurant list fetching resource:- {
  unstable_createResource,
} ; restaurantListResource = unstable_createResource( { ( {
    fetch( )
      .then( res.json())
      .then( { { restaurants } = response;
        resolve(restaurants);
      });
  });
}); import from "react-cache" const => () return new Promise ( ) => resolve, reject "https://8kq2vljq58.sse.codesandbox.io/restaurants" => res => response const react-cache In the above code snippet we are using and as the name suggests this is still unstable_createResource unstable. unstable_createResource takes a function as one of its arguments and a hash function as the second argument which is used to create the key for the hash map which caches the data. The whole suspense and suspended rendering magic comes into play with this because this function unstable_createResource throws a promise. (Dan’s tweet about cache throwing a promise and react catching it) A layman implementation of what it might look like could be: unstable_createResource = { resolved = (); {
    read(key) => { (!resolved.has(key)) { method(...args)
          .then( resolved.set(key, val));
      } resolved.get(key);
    }
  };
} const ( ) => method let new Map return if throw => val return If you notice, it returns an object with a function which takes as a param which is usually the hash key of the hash map and if the data is not fetched yet then this read function will as we see on line no 6. read key throw a promise The actual implementation of this function can be found here:- https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js#L142 Who will catch this promise? will catch this promise like how they used to catch the error thrown by React render. More information on Error Boundaries can be found on reactjs.org: Error Boundaries https://reactjs.org/docs/error-boundaries.html So now with our component would look something like this: unstable_createResource RestaurantList RestaurantList = { restaurants = restaurantListResource.read(); ( <h2 className="f3 fw4 pa3 mv0">Restaurant List</h2> <div className="cf pa2">{renderRestaurants(restaurants)}</div> );
}; const => () // if no restaurants are found in the cache, the suspense will throw a promise const // this line will have to wait until that promise resolves return < > article </ > article Who will implement componentDidCatch? This is where from react comes into play. has a sort of mechanism which will catch this promise and show a fallback until the promise is resolved. Suspense React.Suspense componentDidCatch React, { Suspense } ; RestaurantListContainer = { ( <RestaurantList /> );
}; import from 'react' const => props return < = ' '}> Suspense fallback { Loading... </ > Suspense This concludes the topic of using React.Suspense to suspend rendering until data fetching is complete and until then show a fallback. We learnt about in this topic and how it can be used to throw a promise and suspend rendering. react-cache Concurrent React To take advantage of the asynchronous capabilities of concurrent React, We change the way we render our root element. <App /> Where we do this in standard React: render(&lt;App /&gt;, document.get ); . ReactDOM ElementById(' ') root We do this for concurrent React: create ).render(&lt;App /&gt;); . ReactDOM Root( . (' ') document getElementById root That is all that needs to be changed to enable Concurrent React. This brings us with a new magical capability which is:- prop- this is the time in after which our fallback component will show up. This will avoid screen flickering issue which usually occurs on faster network where the loader shows up for few ms and then the data comes immediately. This will make sure that for faster networks Spinner will never show up thereby avoiding screen flickering. maxDuration ms React.StrictMode If you are developing in React 16.6, what has been recommended is to wrap <React.StrictMode> around <App /> so any unsupported features you may integrate will be prompted as warnings in your development console. Wrap strict mode around your app like so: ReactDOM.render( <App /> < > React.StrictMode , document.getElementById('root')); </ > React.StrictMode Defer Mode in Concurrent React We can defer certain setState calls and let it wait until some other important operations like data fetching finishes for example clicking on a restaurant card and not rendering the detail page until all the data for the detail page has been loaded. This is the kind of stuff it allows you to do: To use this we need another api which is part of an package called as unstable npm scheduler { unstable_scheduleCallback defer } https://www.npmjs.com/package/schedule _blank ; import as from "<a href=" r" target=" ">scheduler</a>" To defer a setState call we can do like the function below where I am delaying showing the detail page until the data for that page is loaded. { unstable_scheduleCallback defer } ;
...

toggleDetailPage = { (id) { .setState({ : id
    });
    defer( { .setState({ : });
    });
  } { .setState({ : id, : });
  }
}; import as from "scheduler" => id if this id => () this showDetail true else this id showDetail false Defer is also able to somewhat catch the thrown promises, and only apply the state changes after all of the child async operations are completed. Complete example with concurrent react, createResource, Suspense and defer mode can be found here https://codesandbox.io/s/kwjjovx5wo Here is what Dan had to say about this whole set state defer: Code Splitting with React.lazy and React.Suspense The React.lazy function lets you render a dynamic import as a regular component. Before: React ; RestaurantListComponent ; { ( <RestaurantListComponent /> );
} import from 'react' import from './RestaurantList' ( ) function App return < > div </ > div : In the above implementation the will be part of your main bundle and will not be lazy-loaded. Note RestaurantListComponent After: React, { Suspense, lazy } ; RestaurantListComponent = lazy( ( )); { ( <RestaurantListComponent /> );
} import from 'react' const => () import './RestaurantList' // code-splitted, on demand loaded component ( ) function App return < = > Suspense fallback "Loading..." </ > Suspense : With this approach, will be a code splitted component loaded on demand. Note RestaurantListComponent Example of lazily loaded component in a chunk “ 1.chunk.js” How to use these API’s? React.Suspense with React.lazy is a stable API and can be installed from npm as the latest stable version of react and react-dom npm react react-dom install react-cache and scheduler are unstable. Here is how you can still use them: npm install react@ -alpha - next
npm install react-dom@ -alpha - next
npm install react-cache@ -alpha npm install scheduler@ 16.7 .0 .2 16.7 .0 .2 2.0 .0 .1 0.11 .2 Conclusion To conclude, I am really excited about all these api’s to be stable soon. What are your thoughts on these features? Let me know in the comments section! 😊 Here is the roadmap from the React team for the upcoming releases: https://reactjs.org/blog/2018/11/27/react-16-roadmap.html Resources React lazy, Suspense and Concurrent React Breakdown with Examples Beyond React 16: Time Slicing and Suspense API Dan’s JSCONF talk React Suspense: Async Rendering in React What’s new in React — Presentation Fresh Concurrent React Twitter thread around this topic Special thanks to for reviewing this 😊 Sara Vieira

Facebook

Fetch

Twitter

YouTube

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - REACT.

2020 - Hacker Noon Contributor of the Year in REACT

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Magic of React Suspense with concurrent react and React.lazy API

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Vivek Nayyar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Magic of React Suspense with concurrent react and React.lazy API

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Vivek Nayyar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES