react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

I18nProvider re-renders unnecessarily due to a new dict value being re-created every time

Open IgnusG opened this issue 1 year ago โ€ข 0 comments

Provide a general summary of the issue here

Some hooks like useCalendarGrid use the useLocale hook to fetch locale information. However if the I18nProvider is rendered (eg. as part of a parent update somewhere in the tree) even if locale stays the same it re-creates a new dictionary object forcing all child hooks to re-render (even if their parent components don't have to).

๐Ÿค” Expected Behavior?

The hook should memo the dict value to avoid causing renders down the tree or I18nContext should be exported to allow for custom adjustments to this behavior.

๐Ÿ˜ฏ Current Behavior

Only the provider is exported which causes this issue. It's not possible to access the context itself so it's not possible to resolve this problem in userland.

๐Ÿ’ Possible Solution

No response

๐Ÿ”ฆ Context

No response

๐Ÿ–ฅ๏ธ Steps to Reproduce

  1. Create a calendar structure as per examples wrapping it in I18nProvider somewhere close to the top of the app tree
  2. Memo the calendar component so it doesn't update when parents do
  3. Force a render to the app causing a re-render to the I18nProvider - observe the dict now changes reference causing re-renders everywhere its used (including inside the calendar - even if we don't change anything in it)

Version

3.32.1

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?

macOS

๐Ÿงข Your Company/Team

No response

๐Ÿ•ท Tracking Issue

No response

IgnusG avatar Apr 11 '24 11:04 IgnusG