useOptimisticServerAction<TArgs, TState, TResult> function

OptimisticServerActionState<TArgs, TState, TResult> useOptimisticServerAction<TArgs, TState, TResult>(ServerFunctionRef<TArgs, TResult> ref, TState initialState, TState optimisticUpdate(TState state, TArgs arguments))

Binds a server action to React 19's optimistic state and transitions.

optimisticUpdate runs immediately when invoke is called. React keeps that state visible while the transition is pending and restores the previous state when the action settles. The server result and error remain available through data and error, just as with useServerAction.

This hook requires a React runtime that supports useOptimistic and useTransition.

Implementation

OptimisticServerActionState<TArgs, TState, TResult>
useOptimisticServerAction<TArgs, TState, TResult>(
  ServerFunctionRef<TArgs, TResult> ref,
  TState initialState,
  TState Function(TState state, TArgs arguments) optimisticUpdate,
) {
  final action = useServerAction(ref);
  final (optimisticState, setOptimisticState) = useOptimistic<TState, TArgs>(
    initialState,
    optimisticUpdate,
  );
  final (transitionPending, startTransition) = useTransition();

  Future<TResult> invoke(TArgs arguments) {
    final result = Completer<TResult>();
    try {
      startTransition(() {
        setOptimisticState(arguments);
        action
            .invoke(arguments)
            .then(
              result.complete,
              onError: (Object error, StackTrace stack) {
                result.completeError(error, stack);
              },
            );
      });
    } catch (error, stack) {
      result.completeError(error, stack);
    }
    return result.future;
  }

  return OptimisticServerActionState(
    state: optimisticState,
    pending: transitionPending || action.pending,
    data: action.data,
    error: action.error,
    invoke: invoke,
  );
}