Optimistic
component
Creates a form input for optimistic UI updates. Use to update the UI with the latest optimistic data.
Anchor to propsProps
Anchor to data
data
Record<string, unknown>
required
The data to be stored in the optimistic input. Use for creating an optimistic successful state of this form action.
string
required
A unique identifier for the optimistic input. Use the same identifier in to retrieve the optimistic data from actions.
Was this section helpful?
Example
import {CartForm, OptimisticInput, useOptimisticData} from '@shopify/hydrogen';
export default function Cart({line}) {
const optimisticId = line.id;
const optimisticData = useOptimisticData(optimisticId);
return (
<div
style={{
// Hide the line item if the optimistic data action is remove
// Do not remove the form from the DOM
display: optimisticData?.action === 'remove' ? 'none' : 'block',
}}
>
<CartForm
route="/cart"
action={CartForm.ACTIONS.LinesRemove}
inputs={{
lineIds: [line.id],
}}
>
<button type="submit">Remove</button>
<OptimisticInput id={optimisticId} data={{action: 'remove'}} />
</CartForm>
</div>
);
}