Key prop
Loading "Key Prop Suspense"
Run locally for transcripts
๐จโ๐ผ Alrighty, we've got a problem that I've been pushing off, but it's time we
resolve it. We removed confusion for our users by waiting until the image is
ready before we display the ship's data, but that means our users have to wait
until the ship's image loads before they can see the ship's data! Ugh, that's
annoying. Wouldn't it be cool if we could have the best of all worlds:
- Show the ship's data as soon as it's ready
- Show the ship's image as soon as it's ready
- Not show the old ship's image while we're waiting for the new one
Well, we can! But it requires a little extra thought. I'm going to have Olivia
explain something to you about how suspense boundaries work with
useTransition.๐ฆ Thanks Peter. Ok, so here's the deal with Suspense boundaries. When one of
their children suspends, they render the fallback until the suspended child is
ready to render. That much should be clear from what we've done so far.
When you add
useTransition and trigger a "suspending state change" from within
that transition, this will prevent the Suspense boundary from rendering and
instead will keep the old UI around and give you a pending state to work with so
you can show a more contextual pending state. That's what we did in the last
exercise.To add to this, even when you're using
useTransition, the suspense fallback
will show up on the initial render of the Suspense component. This is why you'll
see the fallback when you load the page initially.So here's the deal, we need a way to get both a suspense boundary (for the
image) and a pending state (for the data) at the same time. We can do this by
adding a Suspense boundary around the image. But that's not quite enough. We
also need to have React treat the Suspense boundary around the image as if it's
brand new for every image we render so it doesn't participate in the transition.
To do this, we need to give the Suspense boundary a unique key. This will make
React treat it as a new boundary every time the key changes and will keep it out
of the transition.
To make this more clear, here's a walkthrough of what's happening with our
app right now:
Initial Render
- We render the app
ShipDetailscallsuse(getShip(shipName))which suspends- React renders the suspense boundary
- The
getShippromise resolves and React attempts to render theShipDetailsagain. ShipImgrendersImgwhich callsuse(imgSrc(src))which suspends- React keeps the suspense boundary around
- The
imgSrcpromise resolves and React attempts to render theImgagain - Everything settles.
This all is operating as we'd like for now. It's the transition we want to
improve:
Transition
- We call
startTransitionto change theshipName - React tries to re-render and
ShipDetailscallsuse(getShip(shipName))which suspends - React keeps the previous state around and gives us the
isPendingstate astrueso we can show a more contextual pending UI (opacity0.6). - The
getShippromise resolves and React attempts to render theShipDetailsagain. ShipImgrendersImgwhich callsuse(imgSrc(src))which suspends- React keeps the
isPendingstate as-is - The
imgSrcpromise resolves and React attempts to render theImgagain - Everything settles.
Here's how things will work when you're finished with this exercise:
Improved Transition
- We call
startTransitionto change theshipName - React tries to re-render and
ShipDetailscallsuse(getShip(shipName))which suspends - React keeps the previous state around and gives us the
isPendingstate astrueso we can show a more contextual pending UI (opacity0.6). - The
getShippromise resolves and React attempts to render theShipDetailsagain. ShipImgrendersImgwhich callsuse(imgSrc(src))which suspends- React finds a brand new suspense boundary and renders the fallback
- The
ShipDetailsrenders fine whileShipImgshows the fallback - The
imgSrcpromise resolves and React attempts to render theImgagain - Everything settles.
The key is the step where react finds a brand new suspense boundary. This is
accomplished by using the
key prop!๐จโ๐ผ Thank you Olivia!
Great, so now we need you to add a suspense boundary with a
key prop. It
generally makes sense to put the Suspense boundary inside the ErrorBoundary
(in case the fallback fails the error boundary can handle that as well). In
addition we can put the key prop on the ErrorBoundary instead of the
Suspense boundary as well (since the ErrorBoundary is the parent of the
Suspense boundary).So let's give that a shot!
