🤞 Async UI

Welcome to the documentation where you will learn how to integrate Optimistic UI into your asynchronous functions.

Getting started

We will start with the easiest part of all, setting and then obtaining that value optimistically using useOptimistic.

Example: Set a random value in the cache with the key "key" and update the UI immediately. If something goes wrong, rollback to the previous value.

import { useOptimistic } from "toolkitify/optimistic-ui";

let value = 0;

await useOptimistic.promise(
    async () => {
        await new Promise((r) => setTimeout(r, 50));
        value += 2;
        return value;
    },
    {
        optimisticUpdate: () => {
            value += 1;
        },
        rollback: (error) => {
            value = 0;
        }
    }
);

Interfaces

Options