Skip to content

useLocale usage causes additional re-render  #7344

Open
@ohazda

Description

@ohazda

Provide a general summary of the issue here

I am unsure whether I am doing something wrong or if some improvements could be made. I am using I18Provider with an explicitly set locale already determined by the server as it is described in the documentation.

As soon as I add useLocale to the component I can see an additional render, and here is where my confusion is. Why this rerender is happening?

🤔 Expected Behavior?

In my opinion, there should not be any additional re-render to the components that are using useLocale and there is a specified language already.

😯 Current Behavior

It causes rerender when using SSR. Possibly because the useDefaultLocale is using useIsSSR hook.

💁 Possible Solution

I think we should just skip the execution of this hook https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/i18n/src/context.tsx#L31 if the locale is already provided. Otherwise, it still connects to the SSR Provider and triggers rerender.

🔦 Context

No response

🖥️ Steps to Reproduce

Very basic example: https://stackblitz.com/edit/stackblitz-starters-rxc7ky?file=app%2Fpage.tsx

Version

1.4.1 (react-spectrum-components)

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Any

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    🩺 To Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions