Skip to content

Commit 86fccbe

Browse files
authored
refactor: replace useEffect with noop in useIsomorphicLayoutEffect for SSR (#2859)
Replace useEffect fallback with no-op function to prevent SSR warnings and unnecessary effect execution in non-browser environments
1 parent e64b4bd commit 86fccbe

File tree

4 files changed

+10
-6
lines changed

4 files changed

+10
-6
lines changed

packages/hooks/src/useIsomorphicLayoutEffect/index.en-US.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ To avoid this warning, useIsomorphicLayoutEffect can be used instead of useLayou
1414
The source code of useIsomorphicLayoutEffect is:
1515

1616
```javascript
17-
const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
17+
const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : noop;
1818
```
1919

20-
Return useLayoutEffect for browser environment and useEffect for other environments.
20+
Return useLayoutEffect for browser environment and a no-op in non-browser environments to avoid SSR warnings.
2121

2222
For more information, please refer to [useLayoutEffect and SSR](https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a)
Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { useEffect, useLayoutEffect } from 'react';
1+
import { useLayoutEffect } from 'react';
22
import isBrowser from '../utils/isBrowser';
3+
import noop from '../utils/noop';
34

4-
const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
5+
const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : noop;
56

67
export default useIsomorphicLayoutEffect;

packages/hooks/src/useIsomorphicLayoutEffect/index.zh-CN.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ nav:
1414
useIsomorphicLayoutEffect 源码如下:
1515

1616
```js
17-
const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
17+
const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : noop;
1818
```
1919

20-
在非浏览器环境返回 useEffect,在浏览器环境返回 useLayoutEffect。
20+
在浏览器环境返回 useLayoutEffect,在非浏览器环境返回空函数以避免 SSR 警告
2121

2222
更多信息可以参考 [useLayoutEffect and SSR](https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a)

packages/hooks/src/utils/noop.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const noop = () => {};
2+
3+
export default noop;

0 commit comments

Comments
 (0)