Optimistic update는 언제 사용하나요?

Question

안녕하세요 주니어 개발자입니다. 
회사에서 간단한 프로젝트를 하고 있는 중인데요. 
기능 중 버튼 클릭을 통해 데이터를 저장하는 과정에서 optimistic update를 사용해 구현하면 어떻겠냐는 제안을 받았습니다.

optimistic update는 주로 언제 사용하게되나요? 
그리고 혹시 react-query를 사용해서 optimistic update를 구현해보신분 있으신가요?

엄홍재 · Accepted Answer

Optimistic update는 사용자에게 API 요청의 성공 실패와 상관없이 성공한 모습을 먼저 보여주는 것을 의미합니다. 그래서 해석하면 낙관적 업데이트 아닐까요? ㅎㅎ 그래서 Optimistic update는 송금이나 주식 체결과 같은 민감한 정보에는 사용하면 안된다고 생각합니다. 예를들어 주식이 체결된 줄 알았는데 나중에 보면 매수가 안되어있으면 큰일이니까요. 하지만 실패해도 사용자에게 크게 영향을 주지 않는 것이라면 Optimistic update방식으로 구현해도 괜찮을 것 같습니다. 인터넷의 예시를 좀 찾아보면 SNS의 좋아요 기능 들이 예시로 많이 나오더라고요.

react-query를 이용해 구현하는것은 해당 공식문서를 참고하시면 될것 같아요. https://tanstack.com/query/v4/docs/reference/useMutation

구현할 때, 핵심은 
1. onSuccess가 아니라 onMutate를 사용하는것! API의 성공여부에 관계없이 먼저 실행됩니다.
2. onMutate의 return value는 update되기 전의 상태입니다. 그리고 만약 API 요청에 실패했을 때에 onError의 context로 받아서 해당 쿼리를 rollback 할 수 있습니다.

마지막으로 Optimistic update 관련해서 좋은 글이 있어서 요것도 공유드려요~~ https://story.pxd.co.kr/1193