Promise Cache
Loading "Promise Cache"
Run locally for transcripts
π§ββοΈ I've made a couple of changes. I moved the
getShip call into the component itself so we can dynamically change which ship
we're looking at. I also added some buttons to allow us to do this from the UI.But we've got a problem, and I've added a counter button to the UI so you can
reproduce the problem. Every time you click it, we're suspending again π± This
is because we don't have caching on our
getShip function so every render
triggers a new fetch call.π¨βπΌ Yeah, this is far from optimal for our application. Could you add a little
cache for our
getShip function so when it's called with the same ship name it
doesn't request the ship again and suspend?When you're finished, you should be able to click the counter button as many
times as you like without suspending. Additionally, because of the cache, once
you've fetched the details for a ship, you should be able to switch back and
forth and it should be instant.
If you want to reset the cache while you're working on this, simply refresh
the page. We're not going to get into cache invalidation in this workshop.
The slightly inaccurate warning talked about in the video is no longer present
in the latest version of React. Instead the requests will just continue for an
infinite loop! This step will fix the infinite requests.
