fix: refactor useLayoutEffect to follow React Hook rules and update SSR tests

[deepen-404]

Summary:
Refactored useLayoutEffect to comply with React's Rules of Hooks and updated the corresponding SSR test.

Changes:

• Conditional Hook Fix
  Moved isInBrowser() inside useLayoutEffect to avoid conditional hook calls.
• SSR Optimization
  Introduced isInBrowserEnv for early exit on the server.
• Test Updates
  Replaced hook call assertion with a check ensuring addChangeListener is not called when isInBrowser returns false.

Outcome:

• 🛠️ Ensures correct behavior in both browser and server environments.
• ⚛️ Aligns with React best practices (no hook violations).
• ✅ Maintains accurate and relevant test coverage.

[deepen-404]

@eXon Would you be able to review this pull request ?

[eXon]

Hey @deepen-404,

Thank you for taking the time to create a PR. The reason of the condition on the useLayoutEffect is that it will always stay the same (we're always on the client or server). It means even though it might look like it breaks a rule, we sometimes can bend them ;)

Can you clarify what issue this is addressing? Have you seen any type of unwanted behaviour or warning from this?

[deepen-404]

Hey @eXon, thanks for the feedback!

You're right that the runtime environment doesn’t change during execution, so in practice this hasn’t caused functional issues. The reason for the change was mainly to align with the Rules of Hooks strictly — even if it works today, conditional hooks can be risky and may lead to confusion or subtle bugs, especially for contributors less familiar with the context.

That said, there wasn’t a specific runtime error or warning prompting this — it was more of a proactive cleanup to make the hook usage explicitly safe and improve test clarity for SSR.

Happy to revert or adjust if we feel it’s unnecessary — let me know what you think!