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

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

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

Sam Selikoff

Course Content