fix(participant): zustand v5 객체 selector 무한 루프로 참가 화면 크래시 수정 - #37
Merged
Conversation
- useParticipantStore 의 객체 리터럴 selector(매 렌더 새 객체) → 개별 selector 로 분리
- zustand v5(useSyncExternalStore 기반)에서 이 패턴은 "Maximum update depth exceeded"를 던져 참가 화면이 error.tsx("연결이 잠깐 끊겼어요")로 크래시했음. join 은 성공해 인원만 누적됨
- 대상: PlayerWaitingClient, PlayerQuestionClient, PlayerResultClient, PlayerLeaderboardClient, useSubmitAnswer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
증상
참가자가 PIN 입장 직후 "연결이 잠깐 끊겼어요"(play/error.tsx)가 뜸. join 은 성공해 인원만 1씩 누적되고, 재시도할수록 더 늘어남.
원인
참가 화면들이
useParticipantStore((s) => ({ ... }))로 매 렌더 새 객체를 반환. zustand v5 는useSyncExternalStore기반이라 이 패턴은 매 렌더 스냅샷이 달라져 "Maximum update depth exceeded" 를 던짐 → React 가 에러 바운더리로 폴백.수정
객체 리터럴 selector → 개별 원시값 selector 로 분리(
s => s.participantId등).PlayerWaiting/Question/Result/Leaderboard,useSubmitAnswerpnpm tsc --noEmit✅