react-suspense talk

notes.md

Ryan Florence - React Suspense

Render props - going away

• Web and native load data differently
  • mobile switches immediately
  • web pauses and then goes to it when its loaded fro mserver

<Route
  onEnter={(state, replace, cb) => {
    fetch(stufff).then(() => cb());
  }}
/>

• vue and angular also followed
• client routers wait for the data, but apps have a choice
• as a router, do we wait or not wait to load the next page? if we dont wait, do we show a spinner while the api calls returns?
• react router v4 took away the onEnter so that's all there was

Fast - wait yes, spin no Slow - wait no, spin yes

What about if we can wait for 2 sec max and then show spinners if it still hasn't come back?

Live Code Demo:

• taking a component that's using the old router approach, is the data loaded? nope, show spinner, otherwise render

With react suspense this gets a lot easier

• we use resources

const workout = WorkoutResource.read(cache, workoutId);

These readers actually make a promise

If you do want a spinnner add a placeholer

<Placeholder delayMs={1000} fallback={<Spinner />}>
  <Exercises workoutId={workoutId} />
</Placeholder>;
/// OR
{
  workout.completed && (
    <Placeholder delayMs={1000} fallback={<Spinner />}>
      <NextWorkout nextWorkout={nextWorkout} />
    </Placeholder>
  );
}
/// OR
// to prevent the waterfall issue where the exercises
ExercisesResource.preload(cache, workoutId);

"Reach Router"

How to transition from one layer to another is no longer the router's concern, it's now in the component render block. Put some placeholders around the component and resources

React Core Team

• Andrew Clark
• Dan ABramov gaearon
• Flarnie Marchan
• Sebastian Markbage
• Sophie Albert
• Brian Vaughn
• Dominic Gannaway trueadm
• Ryan Florence

When we scroll through a screen and then click a link and then hit the back button, we want to end up where we started in the scroll.

Reach Router supports relative links so you can navigate within the own page.

With suspense and time slicing, you can rewrite the url as a user types into a field. Previously the Router sat above the active component as an HOC so any change meant rerendering anything beneath it.

When the location changes instead of just calling setstate, it uses something called "deferredChange' which is a low priority update, much lower than a user typing.

A lot of redux use cases go away as well since now each resource has its own cache. Every cache miss kicks off a new request and suspends it.

const Competitions = React.lazy(() => import("./Compeitions"));