Mutations and Optimistic UI with React Query

Fetching data is only half of the story — most real-world applications also need to update data on the server. Whether a user is submitting a form, liking a post, or adding a comment, these actions modify existing data and must reflect in the UI quickly and reliably.

Traditionally, developers use fetch or Axios to send POST, PUT, or DELETE requests, then manually update local state to keep the UI in sync. But this approach can easily become inconsistent, especially when multiple components rely on the same data. We might end up refetching the entire dataset or managing duplicate states across our app just to reflect a single change.

Mutation hooks

React Query simplifies this problem with its mutation hooks. The useMutation hook lets us handle data modifications declaratively, while the cache automatically updates affected queries. Even better, we can create an optimistic UI — updating the interface instantly before the server responds — so users feel the change immediately. If something goes wrong, React Query automatically rolls back the change to keep the data consistent.

This combination of mutations and optimistic updates creates faster, smoother, and more reliable user experiences.

Concept explanation

Mutations in React Query are ...