Key prop

👨‍💼 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
ShipDetails calls use(getShip(shipName)) which suspends
React renders the suspense boundary
The getShip promise resolves and React attempts to render the ShipDetails again.
ShipImg renders Img which calls use(imgSrc(src)) which suspends
React keeps the suspense boundary around
The imgSrc promise resolves and React attempts to render the Img again
Everything settles.

This all is operating as we'd like for now. It's the transition we want to improve:

Transition

We call startTransition to change the shipName
React tries to re-render and ShipDetails calls use(getShip(shipName)) which suspends
React keeps the previous state around and gives us the isPending state as true so we can show a more contextual pending UI (opacity 0.6).
The getShip promise resolves and React attempts to render the ShipDetails again.
ShipImg renders Img which calls use(imgSrc(src)) which suspends
React keeps the isPending state as-is
The imgSrc promise resolves and React attempts to render the Img again
Everything settles.

Here's how things will work when you're finished with this exercise:

Improved Transition

We call startTransition to change the shipName
React tries to re-render and ShipDetails calls use(getShip(shipName)) which suspends
React keeps the previous state around and gives us the isPending state as true so we can show a more contextual pending UI (opacity 0.6).
The getShip promise resolves and React attempts to render the ShipDetails again.
ShipImg renders Img which calls use(imgSrc(src)) which suspends
React finds a brand new suspense boundary and renders the fallback
The ShipDetails renders fine while ShipImg shows the fallback
The imgSrc promise resolves and React attempts to render the Img again
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!

04. Suspense img/03. Key prop (💪 problem)

Key prop