illustration for Optimistic UI Updates in React
pro

Optimistic UI Updates in React

Instructor

Erik Aybar
25m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.0
635
people completed
Bookmark
Download
RSS

No matter what type of app you’re building, you're going to need to fetch data, display it to a user, and enable the user to interact with and update that data. This interaction and updating phase is often asynchronous by nature which presents you, the developer, an opportunity to provide a range of different experiences depending on the scenario.

In some instances, you can leverage what is known as optimistic UI updates for an improved, snappier user experience compared to a traditional “loading/waiting” experience. They aren’t suited for every use case, but selectively making use of optimistic UI updates throughout your application can have a significant impact on the quality of user experience for relatively little cost and complexity!

In this course, we’ll walk through implementing optimistic UI updates in the real world example of liking and unliking a tweet. We'll use React's built-in state and make use of extracting setState updater functions to help manage and better define our setState usages.

Learner Reviews

  • Vijay P R
    a year ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Optimistic Updates were a completely new idea to me .Have seen this in websites like Facebook, Twitter etc but the implementation details and handling of corner cases were clearly explained . Speed is exact and anyone with a reasonable knowledge in React and JS can learn it . Didn't bore with unnecessary stuffs.

    Taking it to next level by optimising some of the steps is now our job :)

  • Rodrigo Erades
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    short, conciss, well explain. I got the point of this tutorial , great !

  • Bruno
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    The good: I actually know how to create an optimistic ui now so it delivers what was promised.

    The bad: You talk very slow and sleepy which makes it hard to keep attention. More enthusiasm please :)

  • Isa Chen
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Simple techniques that are well explained, quick to watch.

  • Fernando Gomes Oliveira Teixeira
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What would make this course a 7 for you?

    add some real requests on some API

  • Dusan
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What would make this course a 7 for you?

    Nice lesson but nothing surprisingly new here.

Course Content

25m • 12 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers
    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use
    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.