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

feat: optimize app by reducing rerenders #1074

Merged
merged 14 commits into from
Dec 11, 2024
Merged

feat: optimize app by reducing rerenders #1074

merged 14 commits into from
Dec 11, 2024

Conversation

KevinWu098
Copy link
Member

@KevinWu098 KevinWu098 commented Dec 8, 2024

Summary

Using react-scan, we can identify areas with high rerenders and optimize AntAlmanac's performance. This PR targets three areas:

  • Refactors and cleans up SectionTableBody and HoveredStore to remove unnecessary rerenders when hovering courses
  • Refactors and cleans up CalendarRoot to stop rerenders when interacting with calendar event elements
  • Refactors and cleans up SectionTableBody and adding courses, to remove renders caused by adding courses

Before

SectionTableBody (hovering)
chrome-capture-2024-11-8 (3)

Calendar
chrome-capture-2024-11-8

SectionTableBody (adding courses)
chrome-capture (1)

After

SectionTableBody (hovering)
chrome-capture-2024-11-8 (4)

Note: the key thing is that SectionTableBody now does not rerender rows -- the calendar is expected to rerender (although it would be preferable if the entire thing didn't rerender, but that's a library level problem)

Calendar
chrome-capture-2024-11-8 (5)

SectionTableBody (adding courses)
chrome-capture-2024-11-8 (7)

Test Plan

  1. Interact with Calendar events. Click, click out. Elements should behave as before (clicking an event triggers a Popover)
  2. Repeat # 1 on mobile screen sizes
  3. With Hover to Preview courses on and off, search and interact with both the Search and the Added panes. There should be no rerenders of rows on hover.
  4. Add courses to your schedule. ScheduleConflict (the darker highlighting of courses when it would overlight another course) should update correctly. The yellow highlighting should also update correctly. There should be no rerenders except for courses which overlap the newly added course.

Note: React Scan should only be added to our dev environments (this includes staging), but it should not be added to prod

@KevinWu098 KevinWu098 marked this pull request as ready for review December 8, 2024 20:51
@MinhxNguyen7 MinhxNguyen7 removed the request for review from adcockdalton December 11, 2024 05:23
Copy link
Member

@MinhxNguyen7 MinhxNguyen7 left a comment

Choose a reason for hiding this comment

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

A few minor gripes

Copy link
Member

@MinhxNguyen7 MinhxNguyen7 left a comment

Choose a reason for hiding this comment

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

Seems alright

@KevinWu098 KevinWu098 merged commit d011ebc into main Dec 11, 2024
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done 🤩
Development

Successfully merging this pull request may close these issues.

2 participants