✅ Deploy Preview for vibrant-gates-22c214 ready!

Name	Link
🔨 Latest commit	5efb496
🔍 Latest deploy log	https://app.netlify.com/projects/vibrant-gates-22c214/deploys/683dc4c11860f60008c1155d
😎 Deploy Preview	https://deploy-preview-3338--vibrant-gates-22c214.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.

Why?

Open in StackBlitz

npm i https://pkg.pr.new/@floating-ui/core@3338

npm i https://pkg.pr.new/@floating-ui/dom@3338

npm i https://pkg.pr.new/@floating-ui/react@3338

npm i https://pkg.pr.new/@floating-ui/react-dom@3338

npm i https://pkg.pr.new/@floating-ui/react-native@3338

npm i https://pkg.pr.new/@floating-ui/utils@3338

npm i https://pkg.pr.new/@floating-ui/vue@3338

commit: 5efb496

@FezVrasta

The previous name, useModernLayoutEffect, felt a bit abstract and may not have clearly conveyed the hook’s behavior.
Since the hook only runs on the client and no-ops during SSR, i felt that useClientLayoutEffect would better reflect its intent.

I believe this change improves readability and maintainability, and aligns more closely with naming conventions in SSR-aware libraries — but of course, open to feedback if there’s a better alternative.

Ok thanks, makes sense to me. I'll let @atomiks have the last word though.

The ‘Client’ is redundant since useLayoutEffect is already client-only

The only reason this util exists is because in React 17 and 18, it warns when useLayoutEffect is used in a server pre-rendered component, but this was removed in 19 (this is why it has ‘Modern’).

The token exists to disambiguate from React’s native useLayoutEffect, but it's the exact same thing while preventing the warning in older versions.

A correct name is useLayoutEffectWithoutWarningInOlderReacts but it's way too long of course

@atomiks

I appreciate the detailed explanation and historical context, especially that this hook exists to avoid warnings in React 17 and 18, and that the name useModernLayoutEffect was introduced to reflect React 19 and above (“modern” React).

I also understand that since useLayoutEffect is inherently client-only, the term “Client” might seem redundant, and that useModernLayoutEffect could be reasonable given this hook’s purpose to suppress warnings in earlier React versions.

However, I believe that useClientLayoutEffect might offer a clearer and more maintainable name for the following reasons:

• While useLayoutEffect is client-only by nature, this fact may not always be immediately obvious to all developers, especially those new to or unfamiliar with SSR. Including “Client” explicitly could help indicate the hook’s execution environment, which may reduce confusion and lower the learning curve.
• The term “Modern” is somewhat relative and might become ambiguous over time — what is “modern” today could be considered outdated tomorrow. In contrast, “Client” tends to convey the intended meaning more consistently regardless of React version.
• Although the hook’s original purpose (to prevent warnings in older React versions) remains the same, naming it based on its behavior could help future-proof the codebase.
• Of course, useLayoutEffectWithoutWarningInOlderReacts would be the most precise name but is impractically long. useClientLayoutEffect seems to strike a reasonable balance by being concise yet sufficiently descriptive.

In conclusion, while “Client” may technically seem redundant, including it might provide greater clarity and maintainability, especially in an open-source environment with contributors of varied experience levels.