Passing the optimistic value to an action #8

I'm thinking about patterns for actions in React Aria. A common pattern in many components is an interface like this:

interface Props<T> {
 value?: T,
 changeAction?: (v: T) => void | Promise<void>
}

Internally, we use useOptimistic to store the latest value to display to the user.

function Component<T>(props: Props<T>) {
 let [isPending, transition] = useTransition();
 let [optimisticValue, setOptimisticValue] = useOptimistic(props.value);
 let onInteraction = () => {
 transition(async () => {
 let newValue = computeNewValue();
 setOptimisticValue(newValue);
 await props.changeAction?.(newValue);
 });
 };
 // Display optimisticValue...
}

Sometimes, we need to calculate newValue based on the previous state. I think this should be based on the optimistic value, not the value prop, because the optimistic value is what the user is seeing and they will expect the updated state to reflect that. We can do that by passing a function to setOptimisticValue. Then ideally we'd pass that value to changeAction so the parent component can respond to it. However, there doesn't seem to be a good way to do this.

This does not work because the callback is not called until the next render:

let newValue;
setOptimisticValue(oldValue => {
 newValue = calculateNewValue(oldValue);
 return newValue;
});
await changeValue?.(newValue); // newValue is undefined.

This does not work because React will error that you can't trigger a re-render while rendering a different component (assuming the action sets state in the parent component):

setOptimisticValue(oldValue => {
 let newValue = calculateNewValue(oldValue);
 changeValue?.(newValue); // Error: cannot trigger a re-render while rendering a different component
 return newValue;
});

Has anyone found a good pattern for this? In the past, we've tracked the current value in a ref and used this to calculate the new value instead of using the setState callback. This feels quite hacky because you have to reset the ref on the next render to match the value prop, which seems like exactly what useOptimistic is supposed to handle. However because you can't get the actual optimistic value synchronously, there's not a good place to call the action.