Building Autowini's like feature with TanStack Query and Optimistic Update

What is an Optimistic Update?

Optimistic Update is called 낙관적 업데이트 (literally "optimistic update") in Korean. It is a way of updating the UI ahead of the server response, on the assumption that the state update will succeed.

You expect the server to handle the user's request successfully and change the UI right away. That gives users immediate feedback regardless of how fast the server responds, so they can use the system quickly.

In particular, even when the network is poor or responses take a long time, the user experience is less affected.

However, if an error occurs on the server, the screen can show wrong information for a moment. So you need to design error-handling (rollback) logic for that case along with it.

Notes from building Autowini's like feature

Autowini's likes page was a legacy project. Because it was managed with JSP and carried unnecessary code, unnecessary page reloads and inefficient logic happened every time someone checked listing data or pressed like. So I started replacing the old v1 API with a v2 API, and along the way I worked toward improving the UX of the like feature.

The old logic and a new approach

At first I used the traditional approach: show the listing information from the API, and update the state once the API call succeeds. But to give immediate feedback when the like button is clicked, I introduced the following approach:

1. State management:
   • Managed the state of each individual listing with useState.
   • Gave immediate feedback when the like button is clicked: the heart icon turns red and the like count goes up by +1.
2. Using TanStack Query's useMutation:
   • onSuccess: Show a success message toast when the API request succeeds.
   • onError: Roll back the state (useState value -1) and show a failure message when the API request fails.

In the process I ended up applying an Optimistic Update naturally. My experience from an earlier personal project helped, and I felt both amazed and proud.

Understanding Optimistic Update and its limits

After the work, I studied the concept of Optimistic Update again and learned the following:

• Pros:
  • Suited to features that need an immediate UI change, like a like button.
  • Improves the user experience (UX) regardless of how long the network response takes.
• Limits:
  • Not suited to sensitive data (e.g., payments, transaction history).
  • On an unstable network, the failure rate goes up, which can lead to frequent rollbacks.
  • If a request fails, highly sensitive information is briefly shown incorrectly, which can seriously hurt the user experience.

Through this work I experienced both the strengths and the limits of Optimistic Update, and came to understand the concept more deeply.

Going forward, I want to be a developer who provides a better user experience by choosing and applying technology that fits the situation.