Mastering Optimistic Updates: Instantaneous User Interface Perception

In an ideal digital realm, network requests would be instantaneous. However, this is far from reality. Even a 300ms delay, perceptually minor as it may seem, can create a sluggish user experience during interactions such as clicking, typing, or dragging. This is where Optimistic Updates come into play.

Optimistic updates are a technique where, rather than waiting for server confirmation that a certain action has been executed — for instance, saving a comment, liking a post, or updating a title — we immediately reflect the change in the UI, predicated on the assumption that the action will be successful. In case the action fails, we revert the changes.

This concept may seem straightforward, but its proper implementation can drastically boost perceived performance and significantly enhance user experience, giving applications a snappy, responsive, and native-quality feel.

In this article, we will delve into:

• The mechanics of optimistic updates
• Suitable scenarios for their use, and scenarios to avoid
• Real-world examples from industry-leading products
• Patterns with React Query, SWR, Redux, and beyond
• Strategies to handle failures, revalidation, and race conditions

Unraveling Optimistic Updates

At its core, an optimistic update is a speculative UI change. The frontend behaves as though a mutation has succeeded even before receiving confirmation from the server.

Here is an example: A user likes a tweet → the heart icon fills instantly → a request is sent to the server → the server responds at a later time.

In scenarios where the request fails, the UI is programmed to rollback the changes or display an error message.

Optimistic updates are a subset of the broader principle of optimistic concurrency control, where success is assumed and corrective measures are only taken upon failure.

The Significance of Optimistic Updates

Optimistic updates offer an array of benefits:

• They virtually eliminate perceived latency, making interactions feel instant.
• They align digital interactions with real-world expectations, where touch is immediately responsive.
• They enhance the user's trust in the system's responsiveness.
• They prevent visual disruptions such as flickering screens and loading spinners.
• They maintain application responsiveness even under mobile or slow network conditions.

In the absence of optimistic updates:

• The UI appears to freeze as it waits for server confirmation.
• The flow of user experience is disrupted by loading states.
• Interactions feel sluggish or broken, leading to user frustration.

React + Mutation: An Implementation Example

Let's explore the implementation of optimistic updates using a simple React and Mutation example.

const [liked, setLiked] = useState(false);

const handleLike = () => {
  setLiked(true); // optimistic update

  fetch("/api/like", { method: "POST" })
    .then(res => {
      if (!res.ok) throw new Error("Failed");
    })
    .catch(() => {
      setLiked(false); // rollback
    });
};

In this code snippet, the UI is programmed to be immediately responsive to user actions, and a rollback mechanism is instituted to handle any rare errors that might occur.

Implementing Optimistic Updates with React Query

React Query provides a powerful toolset for managing server state in React applications. Here's how you can use it to implement optimistic updates:

const mutation = useMutation(sendLike, {
  onMutate: async (newData) => {
    await queryClient.cancelQueries("likes");

    const previous = queryClient.getQueryData("likes");
    queryClient.setQueryData("likes", old => [...old, newData]);

    return { previous };
  },
  onError: (err, newData, context) => {
    queryClient.setQueryData("likes", context.previous);
  },
  onSettled: () => {
    queryClient.invalidateQueries("likes");
  }
});

In this piece of code, we:

• Cancel any in-flight queries to avoid overwriting our optimistic update.
• Store the previous state before executing the optimistic update.
• Apply the optimistic change to the UI.
• Rollback to the previous state in case of a failure.
• Invalidate our queries on success to fetch the most up-to-date data from the server.

Implementing Optimistic Updates with SWR

SWR is a React Hooks library for remote data fetching. It offers a declarative and efficient way to fetch data, with built-in features for caching, revalidation, focus tracking, and more. Here's an example of how to implement optimistic updates using SWR:

mutate("/api/posts", async (prev) => {
  const optimistic = [...prev, newPost];
  await fetch("/api/posts", { method: "POST", body: JSON.stringify(newPost) });
  return optimistic;
}, { optimisticData: [...data, newPost], rollbackOnError: true });

In this example, SWR simplifies optimistic UI logic by making it declarative and ensures safety by rolling back any changes in case of errors.

Real-World Use Cases of Optimistic Updates

Twitter

On Twitter, user actions like likes, retweets, and bookmarks are updated instantly in the UI. The backend reconciles these actions at a later time and can silently correct any discrepancies in the UI.

Notion

Notion takes optimistic updates to another level. Every keystroke is treated as an optimistic update, with changes being synced in the background and merged with the server data.

GitHub

GitHub uses optimistic updates for actions like issue reactions, comments, and pull request merges. This approach keeps user interaction fast and smooth while preserving the principle of eventual consistency.

Risks and Tradeoffs of Optimistic Updates

While optimistic updates offer numerous benefits, they come with their own set of challenges:

• If the server rejects the mutation, the user may encounter UI inconsistency.
• Implementing optimistic updates requires rollback logic and state caching mechanisms.
• Race conditions can corrupt data if not handled properly.
• Users may interact with stale or temporary state, leading to confusion or errors.

Best practices to mitigate these risks include:

• Ensuring deterministic mutation logic.
• Using unique local IDs to track temporary items.
• Limiting optimistic updates to safe, idempotent actions that won't cause adverse effects if repeated.

Good Patterns for Implementing Optimistic Updates

Implementing optimistic updates effectively requires following certain patterns:

• Save a snapshot of the current state before executing a mutation.
• Apply the local UI update immediately after the mutation.
• Try to execute the server call in parallel to the local update.
• Rollback the changes only in case of failure.
• Revalidate the data upon receiving server confirmation.

It's important to avoid blocking logic and treat server confirmation as asynchronous validation, rather than a blocker.

Anti-Patterns to Avoid When Implementing Optimistic Updates

While optimistic updates can drastically improve user experience, there are certain pitfalls you should avoid:

• Optimistically updating critical data such as passwords or account balances.
• Failing to rollback on mutation errors, which can lead to data corruption or inconsistencies.
• Updating the UI with derived state rather than the cached source, which can lead to inconsistencies.
• Replacing entire lists, which can break concurrent updates.
• Stacking multiple mutations without tracking rollback points, which can make it difficult to revert changes if an error occurs.

Conclusion: UX that Feels Like Magic

Optimistic updates blur the line between frontend and backend — and when implemented correctly, they can make the user experience seamless to the point that the user can’t tell the difference.

Implementing optimistic updates requires a shift in mindset:

• Trust the user and assume their actions will be successful.
• Trust the system to handle errors and rollbacks effectively.
• Prioritize responsiveness over waiting for server confirmation.

Waiting for the server to confirm every action is a viable approach. However, creating an experience where the user feels like they didn’t have to wait at all — that’s where the real magic lies. And in the end, delivering a delightful user experience is what wins.