태그보기
사진보기
제목보기
태그검색
Search
Implement Optimistic UI for insert/update/delete mutations with React Query
리액트 쿼리로 삽입/갱신/삭제 상태 변경을 위한 Optimistic UI(OUI) 구현
If you wonder what Optimistic UI is, I suggest you check out my previous article Better UX with Optimistic UI.
Optimistic UI가 뭔지 궁금하면 이전 글을 참조해라.
I assume that you’re familiar with React Query. If not, you can check my other article Fetch, Cache, and Update Data Effortlessly with React Query. It is really easy to use. I love React Query! Not only you can control every detail of how you fetch, cache, and use the data you get from the server but also you can implement optimistic updates easily with React Query. You can check out the docs on optimistic updates here.
리액트 쿼리는 잘 알 것이다. 만약 아니라면 이 글을 읽어보라.정말 사용하기 편하다...
모든 세부 사항을 제어할 수 있을 뿐만 아니라 optimistic updates를 쉽게 구현할 수 있다.
Generally, an optimistic update comes with a mutation. A mutation is typically used to insert/update/delete data or perform server side-effects. You’re likely going to have something like this:
일반적으로 OUI은 mutation을 수반한다. mutation은 일반적으로 삽입/갱신/삭제하거나 서버의 side-effects를 수행하기 위해 사용한다.
Like Button
I showed you how to implement a like button in the previous article. Let’s see how we can achieve this with React Query.

Twitter Like Button
Suppose you have a component that renders the list of tweets using React Query:
Optimistic UI With React Query 정리
2022/03/17
2022/05/05 12:46
2022/03/17 18:18
Load more