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

Skip to content

new DurationFormat is very slow on React Native / Hermes #4936

Open
@cambecc

Description

@cambecc

Which package?

"@formatjs/intl-durationformat": "0.7.4"

Describe the bug

Instantiating instances of DurationFormat is very slow on React Native / Hermes:

const start = Date.now();
new Intl.DurationFormat("en");
console.log(`took ${Date.now() - start} ms`);

Output:

took 610 ms

I believe #4522 is likely the same issue.

Screenshots

This flamegraph is a little rough but demonstrates where the cost is going:

Image

Smartphone:

  • Device: iOS Simulator
  • OS: iOS 18.1
  • React Native: 0.76.6

Investigation

Locale matching is known to be particularly slow on React Native / Hermes (#4276). Because of this, caching of Intl objects is recommended.
Unfortunately, the instantiation of even one instance of DurationFormat heavily impacts performance, taking about 600 ms on my machine.

The reason appears to be due to DurationFormat passing 700+ locales as the availableLocales argument to ResolveLocale. Other Intl objects like NumberFormat or ListFormat do not have this problem because the set of available locales is opt-in via imports of locale-data. DurationFormat appears to be unique in that all locale data is automatically made available (probably in time-separators.generated.ts)?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions