Asynchronous Hooks

Asynchronous hooks status interface

useStartFinishErrors
const { updateAddress, ...updateStatus } = useCustomerUpdateAddress();
// Main status helpers
const { started, finished, success, errors, reset, } = updateStatus;
status
initial
onSuccess
onError
started
true or false
false
true
true
Request started
finished
true or false
false
true
true
Request finished
success
true or false
false
true
false
Request finished without errors
errors
[] or [..'error']
[]
[]
[...'error']
Request errors
setStarted
fn
overwrite started
setFinished
fn
overwrite finished
setErrors
fn
append error(s)
setSuccess
fn
overwrite success
reset
fn
reset statuses to initial
resetTimer
ref
helper ref setTimeout

Async hooks options

autoReset
ms
auto resets "success" and "errors" states ms after completed
autoReset hook option
// With autoReset
const { updateAddress, ...status } = useCustomerUpdateAddress({ autoReset: 2000 });
// status.success lifecycle example (autoReset)
false -> true || false -> 2000ms -> false
// status.errors lifecycle example (autoReset)
[] -> ['error one'] || [] -> 2000ms -> []
// Without autoreset
const { updateAddress, ...status } = useCustomerUpdateAddress();
// status.success lifecycle example
false -> true || false
// status.errors lifecycle example
[] -> ['error one'] || []

Using async hook status

AddressEdit.jsx - Pseudo code example
import { useCustomerUpdateAddress } from '@backpackjs/storefront';
const AddressEdit = ({ address ) => {
const { updateAddress, ...updateStatus } = useCustomerUpdateAddress();
// fake updated form data
const [editedData, setEditedData] = useState(...) // fictional fields data
const [isDefault, setIsDefault] = useState(...) // fictional fields data
// reset on finish — see autoReset hooks API prop for a short hand
useEffect(() => {
if (!updateStatus?.finished) return;
updateStatus.ref = setTimeout(() => {
updateStatus.reset();
clearTimeout(updateStatus.ref.current);
}, 2000)
}, [updateStatus?.finished])
// handle form submit
const updateAddressOnSubmit = async (event) => {
event.preventDefault();
// update address
const updatedAddress = await updateAddress({
id: address.id,
isDefault: isDefault,
address: editedData
});
if (updatedAddress) {
console.log('Address updated ✅')
}
}
return (
<div class='AddressEdit'>
<EditForm onSubmit={updateAddressOnSubmit}>
<Fields...>
</EditForm>
// Fictional status display
<Status>
{ updateStatus?.started && <Loader /> }
{ updateStatus?.success && <Success /> }
{ updateStatus?.errors && <Errors errors={updateStatus?.errors} /> }
</Status>
</div>
)
}
Copy link
On this page
Asynchronous hooks status interface
Async hooks options
Using async hook status