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

[core] fix(NumericInput): improve performance on Firefox (#5466) #7178

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

PetrusAsikainen
Copy link
Contributor

Fixes #5466

Checklist

  • Includes tests: passes existing tests, no functionality changes
  • Update documentation: no functionality changes

Changes proposed in this pull request:

Number.prototype.toLocaleString is relatively slow on Firefox, and is currently heavily used by NumericInput.getDerivedStateFromProps (which further calls isFloatingPointNumericCharacter on each character of the current value). This means that if you have a bunch of NumericInputs on a form, it slows renders down to a crawl even if the NumericInput isn't being updated itself.

This PR improves the situation in two ways:

  • Caches the regexes generated by isFloatingPointNumericCharacter per locale. I don't think there's a reasonable situation where the representation of numbers would change during page load.
  • Only calls roundAndClampValue when necessary in getDerivedStateFromProps - essentially, moves the computation of sanitizedValue within the if statement it's used in.

You can see the difference in this Codepen (try using Firefox): https://codesandbox.io/p/devbox/condescending-vaughan-qysyk7

Reviewers should focus on:

Whether this changes behavior in any way.

I'm not sure whether Map is in the current "browser support level" of Blueprint, but its only use in the repo is uniqueId which NumericInput also uses, so I assumed it's fine.

Number.prototype.toLocaleString is relatively slow on Firefox, and is
currently heavily used by NumericInput.getDerivedStateFromProps (which
further calls isFloatingPointNumericCharacter on each character of the
current value).

This improves the situation in two ways:

- Caches the regexes generated by isFloatingPointNumericCharacter
- Only calls roundAndClampValue when necessary in getDerivedStateFromProps
@changelog-app
Copy link

changelog-app bot commented Jan 16, 2025

Generate changelog in packages/core/changelog/@unreleased

What do the change types mean?
  • feature: A new feature of the service.
  • improvement: An incremental improvement in the functionality or operation of the service.
  • fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
  • break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
    and external consumers of the service's API (e.g. customer-written software or integrations).
  • deprecation: Advertises the intention to remove service functionality without any change to the
    operation of the service itself.
  • manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
    performing database surgery, ...) at the time of upgrade for it to succeed.
  • migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?
  • ❗The break and manual task changelog types will result in a major release!
  • 🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
  • ✨ All others will result in a minor version release.

Type

  • Feature
  • Improvement
  • Fix
  • Break
  • Deprecation
  • Manual task
  • Migration

Description

[core] fix(NumericInput): improve performance on Firefox (#5466)

Check the box to generate changelog(s)

  • Generate changelog entry

@ashleighp13 ashleighp13 requested a review from ggdouglas January 21, 2025 20:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

NumericInput causing significant performance drops in Firefox
1 participant