 Resources from Sam Selikoff in 2021

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

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Create an Optimistic UI in React with SWR

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

The Optional Chaining Operator, `?.`, can be used as a simple way to check if a variable has a _nullish_ value (`null` or `undefined`). Instead of littering your app with checks like `data && data.movies`, you can write `data?.movies` instead.

Check out the [Optional chaining MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) to read more about the new operator.

Use the Optional Chaining Operator to Simplify Checking for Nullish Values

Mirage JS lets you mock out production APIs directly alongside your frontend React code. You can tweak the data or force a network request to hang, so you can quickly design different states of your application. In this way Mirage lets you build every state of your UI regardless of the state of your production API.

Check out [Mirage's React quickstart here](https://miragejs.com/quickstarts/react/develop-a-component).

Mock an API for Local Development in React with Mirage JS

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.

Topics

Instructors

Content Type

Free or Pro

Sam Selikoff