Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: 댓글이 보여지는 부분에 memo를 적용하라 #609

Merged
merged 1 commit into from
Feb 5, 2023

Conversation

saseungmin
Copy link
Member

  • 상세 페이지의 댓글에 React.memo를 적용하여 성능 최적화

- 상세 페이지의 댓글에 React.memo를 적용하여 성능 최적화
@vercel
Copy link

vercel bot commented Feb 5, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
soople ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Feb 5, 2023 at 1:17PM (UTC)

@github-actions
Copy link

github-actions bot commented Feb 5, 2023

Bundle Sizes

Compared against d14bde2

Route: No significant changes found

Dynamic import: No significant changes found

@github-actions
Copy link

github-actions bot commented Feb 5, 2023

⚡️ 1 Lighthouse report!

Category Score
🔴 Performance 32
🟢 Accessibility 90
🟢 Best Practices 92
🟢 SEO 100
🟠 PWA 80
Category Score
🟢 First Contentful Paint 1.6 s
🔴 Time to Interactive 11.2 s
🔴 Speed Index 6.5 s
🔴 Total Blocking Time 3,190 ms
🔴 Largest Contentful Paint 7.6 s
🟢 Cumulative Layout Shift 0.021

⚡️ 2 Lighthouse report!

Category Score
🟠 Performance 82
🟢 Accessibility 90
🟢 Best Practices 92
🟢 SEO 100
🟠 PWA 80
Category Score
🟢 First Contentful Paint 1.5 s
🔴 Time to Interactive 8.2 s
🟢 Speed Index 2.2 s
🟠 Total Blocking Time 380 ms
🟢 Largest Contentful Paint 2.4 s
🟢 Cumulative Layout Shift 0.038

⚡️ 3 Lighthouse report!

Category Score
🟠 Performance 73
🟢 Accessibility 90
🟢 Best Practices 92
🟢 SEO 100
🟠 PWA 80
Category Score
🟢 First Contentful Paint 1.5 s
🔴 Time to Interactive 8.3 s
🟠 Speed Index 3.7 s
🔴 Total Blocking Time 750 ms
🟢 Largest Contentful Paint 1.5 s
🟢 Cumulative Layout Shift 0.021

Comment on lines +22 to +28
const commentViewPropsAreEqual = (prevProps: Props, nextProps: Props) => (
prevProps.comment.commentId === nextProps.comment.commentId
&& prevProps.userUid === nextProps.userUid
&& prevProps.onRemove === nextProps.onRemove
&& prevProps.comment.writer.uid === nextProps.comment.writer.uid
&& prevProps.comment.groupId === nextProps.comment.groupId
);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

댓글이 보여지는 각 아이템을 memo로 감싸주어 성능 최적화를 하기 위해서 props비교를 수동으로 적용
react는 얕은 비교로 비교한다

export default memo(TagsBar);
export default TagsBar;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

불필요한 memo 제거

@saseungmin saseungmin linked an issue Feb 5, 2023 that may be closed by this pull request
@saseungmin saseungmin added the Improve/Function 기존 기능에 향상시킬 수 추가적인 기능 label Feb 5, 2023
@saseungmin saseungmin merged commit 58e7596 into main Feb 5, 2023
@saseungmin saseungmin deleted the feature/issue-400 branch February 9, 2023 10:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Improve/Function 기존 기능에 향상시킬 수 추가적인 기능 size/M
Projects
None yet
Development

Successfully merging this pull request may close these issues.

리액트 성능 최적화
1 participant