useTransitonOnValueChange

use-transition-on-value-change.ts

import { useEffect, useRef } from "react";

export function useTransitonOnValueChange(value: unknown) {
	if (!document.startViewTransition) return;

	const lastValueRef = useRef(value);
	const deferredRef = useRef<Deferred<void> | null>(null);
	const viewTransitionRef = useRef<ViewTransition | null>(null);

	if (lastValueRef.current !== value) {
		lastValueRef.current = value;
		if (!viewTransitionRef.current) {
			if (!deferredRef.current) {
				deferredRef.current = new Deferred();
			}
			const promise = deferredRef.current.promise;
			viewTransitionRef.current = document.startViewTransition(() => promise);
			viewTransitionRef.current.finished.finally(() => {
				viewTransitionRef.current = null;
			});
		}
	}

	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
	useEffect(() => {
		if (deferredRef.current) {
			deferredRef.current.resolve();
		}
	}, [value]);
}
    
class Deferred<T> {
	public promise: Promise<T>;
	public resolve!: (value: T) => void;
	public reject!: (reason?: unknown) => void;

	constructor() {
		this.promise = new Promise<T>((resolve, reject) => {
			this.resolve = resolve;
			this.reject = reject;
		});
	}
}