refactor: use useSyncExternalStore to subscribe for i18n updates

[vonovak]

Description

this refactors the change subscription mechanism used in Lingui React Provider to use the useSyncExternalStore hook, which according to this offers better support for "concurrent rendering features like selective hydration and time slicing". That being said, I'm not sure how exactly this should be better. Maybe someone will chime in and add more insight.

Everything should work the same except:

Previously, when the Provider was re-rendered with different i18n instance of different defaultComponent, it would ignore them. This likely never was an issue, but technically speaking, it was a bug. Now that is fixed.

What I removed is detection of the cases when i18n.change would happen (catalog update, locale update) before the Provider subscribed for the change event. I removed the detection and a related test case, because I think it's a very unlikely scenario, but I can put it back if desired.

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

Fixes # (issue)

Checklist

• I have read the CONTRIBUTING and CODE_OF_CONDUCT docs
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
js-lingui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 17, 2023 2:34pm

[github-actions]

size-limit report 📦

Path	Size
./packages/core/dist/index.mjs	2.76 KB (0%)
./packages/detect-locale/dist/index.mjs	721 B (0%)
./packages/react/dist/index.mjs	1.66 KB (0%)
./packages/remote-loader/dist/index.mjs	7.24 KB (0%)

[codecov]

Codecov Report

Patch coverage: 100.00% and project coverage change: +0.02% 🎉

Comparison is base (4af4448) 75.95% compared to head (365b612) 75.98%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1746      +/-   ##
==========================================
+ Coverage   75.95%   75.98%   +0.02%     
==========================================
  Files          80       80              
  Lines        2063     2065       +2     
  Branches      529      530       +1     
==========================================
+ Hits         1567     1569       +2     
  Misses        383      383              
  Partials      113      113              

Files Changed	Coverage Δ
packages/react/src/I18nProvider.tsx	92.00% <100.00%> (+0.69%)	⬆️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[timofei-iatsenko]

don't have a react competency to review this one. If you think this would work better, i'll trust you.

[andrii-bodnar]

@vonovak thank you!

[timofei-iatsenko]

@vonovak this change increased size of react package from 2 kB to 2.27 kB due to some issue in the workflows it wasn't caught directly in this PR. Could you increase a size limit budget, or re-consider the need of this change.

[vonovak]

hi @thekip,
I believe that there should be next to no effect on bundle size for people using React 18 because the useSyncExternalStore hook is shipped as part of the react package. For version 17 there is going to be some size increase there but it's likely that the use-sync-external-store shim will be installed by those users anyway.

I therefore don't see an issue with increasing the size budget at this point.

With regard for the need for this change, it's true that this change is not in response to some bug reported or something like that, it's more of a pre-emptive change with not-so-clear-necessity. I'll try to get another opinion on this diff.

[timofei-iatsenko]

@vonovak got your point, just increase bundle budget, please

[vonovak]

@vonovak got your point, just increase bundle budget, please

can you send me a link to a pipeline that's failing or some more info about this? If you can't change the bundle budget, I'm not sure I'll be able to do it, I only have read rights here... Thanks :)

[timofei-iatsenko]

@vonovak FYI #1753