Simple ways to improve perceived performance in React apps

The Psychology of Waiting

User perception of speed is largely psychological. A system that acknowledges user intent within 16 milliseconds (1 frame) feels instantaneous, even if the underlying mutation takes 400ms to persist to the database.

Conversely, an application that waits for full server confirmation before modifying the DOM feels unresponsive and broken.

Optimistic State Updates in Practice

In modern React applications, optimistic UI updates allow us to paint user actions immediately while safely rolling back state in the rare event of a server error.

import { useOptimistic, useTransition } from "react";

export function BookmarkToggle({ id, isSaved, onToggle }: Props) {
  const [isPending, startTransition] = useTransition();
  const [optimisticSaved, setOptimisticSaved] = useOptimistic(
    isSaved,
    (_current, nextState: boolean) => nextState
  );

  return (
    <button
      onClick={() => {
        startTransition(async () => {
          setOptimisticSaved(!optimisticSaved);
          await onToggle(id, !optimisticSaved);
        });
      }}
      className={optimisticSaved ? "text-primary" : "text-muted"}
    >
      {optimisticSaved ? "Saved" : "Save"}
    </button>
  );
}

Selective Hydration and Critical CSS

By streaming server components and deferring non-critical interactive widgets (such as floating chat assistants or heavy telemetry graphs) until after the primary content paints, First Contentful Paint drops dramatically.