[FE] 체크리스트 렌더링 성능을 최적화한다. #689
Merged
Conversation
This file contains 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
ooherin
force-pushed
the
feat/672-rendering
branch
from
68da5ca to
5cc6873
Compare
skiende74
reviewed
Sep 26, 2024
Comment on lines
41
to
45
| const MemoAnswerIcon = React.memo(AnswerIcon); | ||
| const AnswerIconMemo = React.memo(AnswerIcon, (prevProps, nextProps) => { | ||
| return prevProps.isSelected === nextProps.isSelected; | ||
| }); | ||
|
|
||
| export default MemoAnswerIcon; | ||
| export default AnswerIconMemo; |
There was a problem hiding this comment.
이거 이전 코드로는 메모이제이션이 안되던가요?
Comment on lines
44
to
33
| const ChecklistQuestionItemMemo = React.memo(ChecklistQuestionItem); | ||
| const ChecklistQuestionItemMemo = React.memo(ChecklistQuestionItem, (prevProps, nextProps) => { | ||
| return prevProps.answer === nextProps.answer && prevProps.question.questionId === nextProps.question.questionId; | ||
| }); | ||
|
|
skiende74
approved these changes
Sep 26, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
❗ Issue
✨ 구현한 기능
updateAndToggleAnswer,useDefaultRoomName를 사용처인 하위 컴포넌트로 내려주어 렌더링이 최대한 작은 범위에서 일어나도록 해주었습니다.참고 : zustand 의 상태를 쓰는 컴포넌트들은 memo 를 무시합니다. 이를 최대한 아래에서 사용해주어 최적화를 진행했습니다.
ChecklistQuestionAnswers라는 컴포넌트로 나누어주었습니다.ChecklistQuestionAnswers안에서만 store 를 구독하여, 렌더링이 최적화됩니다.2024-09-26.9.24.44.mov
2024-09-26.8.37.05.mov
📢 논의하고 싶은 내용
🎸 기타