useOptimistic causes a flash just before revalidating

[prateek3255]

I wanted optimistic state updates with server actions so I reached out for the useOptimistic hook. But when the content is revalidated there is a flash of previous state for some reason. This is a minimal version of what my client component looks like, the hasLiked prop is passed by the parent server component which is revalidated when the when the action is triggered:

const LikeButton = ({ hasLiked }: { hasLiked: boolean }) => {
  const [isPending, startTransition] = useTransition();
  const [optimisticHasLiked, toggleOptimisticHasLiked] = useOptimistic(
    hasLiked,
    (_, newHasLiked: boolean) => {
      return newHasLiked;
    }
  );
  return (
    <div className="w-full flex flex-col p-6 gap-2 items-center">
      <div>HasLiked: {optimisticHasLiked ? "Yes" : "No"}</div>
      <button
        onClick={() => {
          toggleOptimisticHasLiked(!optimisticHasLiked);
          startTransition(async () => {
            await toggleLiked(!optimisticHasLiked);
          });
        }}
        disabled={isPending}
        className={`p-2 ${
          !optimisticHasLiked ? "bg-red-400" : "bg-gray-400"
        } disabled:cursor-not-allowed`}
      >
        {optimisticHasLiked ? "Dislike" : "Like"}
      </button>
    </div>
  );
};

This is the flash that happens just before revalidation:

Screen.Recording.2023-08-19.at.1.32.11.AM.mov

Here is a minimal reproducible codesandbox with the example used above:
https://codesandbox.io/p/sandbox/green-leaf-8f3dkq?file=/app/LikeButton.tsx

I am not really sure, what I am doing wrong here.

[ipv4sq]

same issue here

[mrcaidev]

Still an issue in Next 15 RC (React 19 RC)

[ckpinguin]

Same here either using React Router 7 fetcher.formData (implicit transition) or react 19 (final) useOptimistic() (explicit transition needed). It's just a very short flash though. I suspected Strict Mode but the problem appears also on the prod build. Maybe this helps: facebook/react#28574