[core] refactor: useModernLayoutEffect => useLayoutEffect

[romgrk]

Following this discussion: https://mui-org.slack.com/archives/C011VC970AW/p1738093359898899

The "modern" token doesn't bring any useful semantic, and makes the codebase more verbose. I've also added jsdocs & typings in our re-export because somehow the typings and jump-to-definition don't work for the floating-ui package, so I had to manually find that function to find what it does.

[atomiks]

In my opinion, the Modern token is useful to disambiguate it from the native React.useLayoutEffect (to avoid accidentally using that), especially when auto-importing it. Floating UI auto imports work fine for me fwiw

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@1931

commit: 876d7fe

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	d0cab6e
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/682673a04712fd0008e72673
😎 Deploy Preview	https://deploy-preview-1931--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	876d7fe
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/682673e00e60d60008dc7675
😎 Deploy Preview	https://deploy-preview-1931--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[romgrk]

is useful to disambiguate it from the native React.useLayoutEffect

We strictly enforce using React imports with React.[...] via an eslint rule, so it's always unambiguous that it's not the React version.

to avoid accidentally using that

If we're really worried about that case, we should add an eslint rule to disable using that react import. Otherwise we're still relying on people not forgetting to use the right one instead of automatically reaching for React.useLayoutEffect.

I don't feel like those reasons aren't compelling enough for the increase in verbosity. The more characters there are on screen, the less the eye can focus on what actually matters.

[atomiks]

I don't feel like those reasons aren't compelling enough for the increase in verbosity. The more characters there are on screen, the less the eye can focus on what actually matters.

Usually but it's also slightly less ergonomic to import since react has priority

[romgrk]

Code is read considerably more times than it is written, it feels preferable imo to optimize for readability rather than save 2 clicks when importing that hook.