Vercel's data-fetching library SWR features a client-side cache. Learn how to use the mutate hook to manipulate this cache in order to optimistically update your UI without waiting for a response from the network.

Learn more about SWR here: https://github.com/zeit/swr

Learn how to use the `mutate` function returned from `useSwr(key)` to update the client-side cache's value for the given cache key.

Optimistically Update SWR's Cache with Client-side Data

We can use the `mutate()` hook again to update our client-side cache using the canonical ID from the server response.

Update SWR's Cache with a Server-side Response

When building optimistic UIs, it's import to indicate to the user when network activity is taking place, in case there's an error or they're ready to close your app. Optimistic UIs also tend to introduce more concurrency to your application, which can making tracking the saving state more difficult. Learn how to use a simple counter to keep track of any pending requests that are currently in flight.

Visually Indicate That a Background Save is Taking Place in an Optimistic UI with React

Error handling in Optimistic UIs can be complex, since changes have already been made to the client-side cache by the time the server responds with an error. Let's look at one approach to dealing with errors in our todo app: removing our temporary todo from the list, and putting the data back into the New Todo field to help avoid losing the user's data.

Create an Optimistic UI in React with SWR

Instructor

Course content (4 lessons)

Instructor