I recently added Suspense, a feature of React, to one of my projects. I learnt the following;

  1. It's awesome and works effortlessly
  2. You need error boundaries
  3. It works great with react-router but you do need to mind how you configure it
    • Error boundaries will make the sub-routes inaccessible when an error is thrown. Instead of wrapping multiple routes, it's better to wrap components on a route-by-route basis instead
    • If you do use an error boundary component as a child of a router <Switch /> component, you may find that the switch's behaviour no longer works as expected

So how do I use it all exactly? Well, that's easy, I created my own little higher-order component. Florals? For spring? Groundbreaking.

In place of a regular <Route /> component, I use this this <SuspenseRoute />. Pass all the usual props along and they get handed down with some extra magic thrown into the mix!

const SuspenseRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={route => (
      <Suspense fallback={<SuspenseLoading />}>
        <Component {...route} />
  )} />