Fix useLayoutEffect throwing warnings when using SSR
#3389
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
satya164
reviewed
Mar 31, 2025
| @@ -100,3 +102,6 @@ export function deepEqual(obj1: any, obj2: any) { | |||
| } | |||
|
|
|||
| export const INT32_MAX = 2 ** 31 - 1; | |||
|
|
|||
| export const useSafeLayoutEffect = | |||
| typeof window !== 'undefined' ? useLayoutEffect : useEffect; | |||
There was a problem hiding this comment.
window isn't a good way to detect a browser environment. typeof document !== 'undefined' would be better to detect browsers. but it'll return false in react native environment, so something like following may be better:
Platform.OS !== 'web' || typeof document !== 'undefined' ? useLayoutEffect : useEffect;There was a problem hiding this comment.
Hey @satya164, thank you for Your feedback.
We've found this implementation, which seems the most comprehensive out of the ones we've seen.
Despite this, we decided to halt any changes in this PR for now, as using useIsomorphicEffect would likely only hide the SSR warning, while not preventing the issue that caused us to use the useLayoutEffect in the first place.
You can find the full explanation for our decision here.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Warning
This PR may cause a regression, more info here.
Test
SSR+react-freezebefore pushing any of these changes!Description
Using
useLayoutEffectin combination with SSR results in a warning.This PR adds a
useSafeLayoutEffect, which acts asuseLayoutEffectin regular apps, and defaults touseEffectwhen using SSR.fixes #3375
Test plan