fix: Prevent Booker Component Re-renders on Input Keystroke #21429

panphora · 2025-05-21T01:31:31Z

This PR fixes an issue where every keystroke in the name or email input caused the entire Booker component to re-render, causing a laggy input performance.

Files Modified:

packages/features/bookings/Booker/components/BookEventForm/MemoizedField.tsx (new file)
- Created a memoized wrapper for the FormBuilderField component using React.memo
packages/features/bookings/Booker/components/BookEventForm/BookingFields.tsx
- Replaced FormBuilderField with MemoizedField to prevent unnecessary re-renders
packages/features/bookings/Booker/components/hooks/useBookingForm.ts
- Added memoization of form values and callbacks using useMemo and useCallback

How It Works

The fix isolates form field rendering by memoizing components and values. When a user types in an input field, only that specific field re-renders instead of the entire Booker component, resulting in better performance during form interactions.

This is a minimal and targeted fix that addresses the re-rendering issue without making major architectural changes to the codebase.

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A
I confirm automated tests are in place that prove my fix is effective or that my feature works.

Summary by cubic

Fixed laggy input in the Booker form by preventing the whole component from re-rendering on each keystroke.

Bug Fixes
- Memoized form fields and callbacks so only the changed input re-renders, improving typing performance.

…fields

CLAassistant · 2025-05-21T01:31:37Z

All committers have signed the CLA.

vercel · 2025-05-21T01:31:38Z

@panphora is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2025-05-21T01:31:41Z

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

Unknown release type "Fix" found in pull request title "Fix: Prevent Booker Component Re-renders on Input Keystroke". 

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

cubic-dev-ai

cubic found 1 issue across 4 files. Review it in cubic.dev

_{React with 👍 or 👎 to teach cubic. Tag @cubic-dev-ai to give specific feedback.}

cubic-dev-ai · 2025-05-21T01:34:00Z

packages/features/bookings/Booker/components/BookEventForm/BookingFields.tsx


        return (
-          <FormBuilderField className="mb-4" field={{ ...field, hidden }} readOnly={readOnly} key={index} />
+          <MemoizedField className="mb-4" field={{ ...field, hidden }} readOnly={readOnly} key={index} />


Spreading field into a new object on every render creates a new reference, which defeats React.memo’s shallow comparison and causes the component to re-render on every keystroke – exactly the problem this PR tries to solve.

This comment is right

You're right! I just sent an update that fixes this by:

Creating memoized components with React.memo

Passing individual props (field, hidden, readOnly) separately

This allows React.memo to correctly detect unchanged props and prevent re-renders

graphite-app · 2025-05-21T01:35:10Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (05/21/25)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add community label" took an action on this PR • (05/21/25)

1 label was added to this PR based on Keith Williams's automation.

panphora · 2025-05-21T13:46:18Z

To address the issues mentioned, I created a dedicated memoized component for form fields that passes individual props rather than creating a new object

retrogtx · 2025-05-21T14:11:15Z

now we have some failing tests! 🙏

panphora · 2025-05-22T17:19:07Z

All set!

github-actions · 2025-06-06T00:24:57Z

This PR is being marked as stale due to inactivity.

.changeset/stale-otters-wish.md

coderabbitai · 2025-07-16T16:39:42Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

Prevent unnecessary re-renders in Booker component by memoizing form …

7f97c86

…fields

graphite-app bot requested a review from a team May 21, 2025 01:31

graphite-app bot added the community Created by Linear-GitHub Sync label May 21, 2025

panphora changed the title ~~Fix: Prevent Booker Component Re-renders on Input Keystroke~~ fix: Prevent Booker Component Re-renders on Input Keystroke May 21, 2025

dosubot bot added bookings area: bookings, availability, timezones, double booking 🧹 Improvements Improvements to existing features. Mostly UX/UI labels May 21, 2025

cubic-dev-ai bot reviewed May 21, 2025

View reviewed changes

retrogtx marked this pull request as draft May 21, 2025 12:28

A dedicated memoized component for form fields

f3c5d8b

Ensure className prop is always a string, even when it's undefined

1946c92

panphora closed this May 22, 2025

panphora reopened this May 22, 2025

github-actions bot added the Stale label Jun 6, 2025

anikdhabal reviewed Jul 7, 2025

View reviewed changes

.changeset/stale-otters-wish.md Outdated Show resolved Hide resolved

github-actions bot removed the Stale label Jul 8, 2025

anikdhabal added the Low priority Created by Linear-GitHub Sync label Jul 16, 2025

Devanshusharma2005 added 4 commits August 21, 2025 12:13

Merge branch 'main' into main

047f18a

some fixes.

2a735ce

more...

a2bfefc

deleting md file

d6847ae

Devanshusharma2005 requested a review from anikdhabal August 21, 2025 07:07

Devanshusharma2005 and others added 2 commits August 21, 2025 15:36

Merge branch 'main' into main

7800aca

Merge branch 'main' into main

4ae8164

anikdhabal closed this Aug 26, 2025

fix: Prevent Booker Component Re-renders on Input Keystroke #21429

fix: Prevent Booker Component Re-renders on Input Keystroke #21429

Uh oh!

Conversation

panphora commented May 21, 2025 • edited by cubic-dev-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Files Modified:

How It Works

Mandatory Tasks (DO NOT REMOVE)

Summary by cubic

Uh oh!

CLAassistant commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented May 21, 2025

Uh oh!

github-actions bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot May 21, 2025

Choose a reason for hiding this comment

Uh oh!

retrogtx May 21, 2025

Choose a reason for hiding this comment

Uh oh!

panphora May 21, 2025

Choose a reason for hiding this comment

Uh oh!

graphite-app bot commented May 21, 2025

Graphite Automations

Uh oh!

panphora commented May 21, 2025

Uh oh!

retrogtx commented May 21, 2025

Uh oh!

panphora commented May 22, 2025

Uh oh!

github-actions bot commented Jun 6, 2025

Uh oh!

Uh oh!

coderabbitai bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

Status, Documentation and Community

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

panphora commented May 21, 2025 •

edited by cubic-dev-ai bot

Loading

CLAassistant commented May 21, 2025 •

edited

Loading

github-actions bot commented May 21, 2025 •

edited

Loading

coderabbitai bot commented Jul 16, 2025 •

edited

Loading