Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@eunjae-lee
Copy link
Contributor

@eunjae-lee eunjae-lee commented Nov 14, 2025

What does this PR do?

This PR improves the stability of booking list items by preventing unnecessary unmount/remount cycles during re-renders, which was causing (avatar) flickering in the UI.

Changes:

  1. Extracted confirmMutation.mutate to a stable reference to prevent the handleAccept callback from being recreated on every render
  2. Added getRowId function to the table configuration to provide stable row identifiers, preventing React Table from unmounting and remounting rows unnecessarily

Visual Demo

No visual demo provided - this fix addresses flickering that occurs during booking list updates (e.g., when accepting/rejecting bookings).

Mandatory Tasks

  • I have self-reviewed the code
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change - N/A (internal optimization, no API changes)
  • I confirm automated tests are in place that prove my fix is effective or that my feature works - Note: This is a UI stability fix that's difficult to test automatically

How should this be tested?

  1. Navigate to the bookings page with multiple bookings
  2. Accept or reject a booking
  3. Observe that the booking list items don't flicker or re-render unnecessarily
  4. Verify that accepting/rejecting bookings still works correctly
  5. Test with both data rows and separator rows in the list

Key areas to verify:

  • No flickering when booking status changes
  • Accept/reject functionality still works correctly
  • Table rows maintain their state during updates

Human Review Checklist

Please pay special attention to:

  • Row ID logic: Verify the getRowId function handles all possible row types (currently handles "data" and "separator" types)
  • Mutation behavior: Confirm that extracting confirmMutation.mutate doesn't cause stale closure issues or break tRPC mutation behavior
  • Dependency array: Verify the change from [confirmMutation] to [confirmMutationMutate] in the handleAccept callback is correct
  • Visual testing: Test the booking list to confirm flickering is resolved when accepting/rejecting bookings

Link to Devin run: https://app.devin.ai/sessions/1987c587ca07434a8025f85eded434da
Requested by: [email protected] (@eunjae-lee)

…re-renders

- Extract confirmMutation.mutate to stable reference to prevent unnecessary re-renders
- Add getRowId to table configuration to provide stable row IDs
- Prevents flickering in booking list items during state updates

Co-Authored-By: [email protected] <[email protected]>
@devin-ai-integration
Copy link
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@keithwillcode keithwillcode added consumer core area: core, team members only labels Nov 14, 2025
@eunjae-lee eunjae-lee marked this pull request as ready for review November 14, 2025 14:49
@graphite-app graphite-app bot requested a review from a team November 14, 2025 14:49
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

No issues found across 1 file

@vercel
Copy link

vercel bot commented Nov 14, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments
Project Deployment Preview Comments Updated (UTC)
cal Ignored Ignored Nov 14, 2025 3:58pm
cal-eu Ignored Ignored Nov 14, 2025 3:58pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

consumer core area: core, team members only ready-for-e2e size/S

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants