Optimistic UI Updates with State Rollback

Snippet

Optimistic UI Updates with State Rollback

Optimistic UI assumes a server request will succeed and updates the interface immediately to feel instantaneous. However, handling failures is mandatory. This pattern captures the previous state before the update, allowing for a seamless rollback if the asynchronous operation fails, ensuring data integrity.

snippet.js
javascript
const useOptimisticAction = (onSync) => {
  const [data, setData] = useState(initialData);
 
  const execute = async (payload) => {
    const previousData = data;
    setData(prev => ({ ...prev, ...payload })); // Optimistic
 
    try {
      await onSync(payload);
    } catch (err) {
      setData(previousData); // Rollback on failure
      console.error('Sync failed, rolling back.');
    }
  };
 
  return [data, execute];
};

react

Breakdown

const previousData = data;

Snapshotting current state to enable restoration in case of network error.

setData(prev => ({ ...prev, ...payload }));

Immediate UI update before the async call starts.

setData(previousData);

Restoring the original state if the try-catch block catches a rejection.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Optimistic UI Updates with State Rollback

Related