Skip to content

docs(useIsomorphicLayoutEffect): state that the effect never runs on the server - #557

Open
mnxmnz wants to merge 1 commit into
mainfrom
docs/use-isomorphic-layout-effect-server
Open

mnxmnz wants to merge 1 commit into
mainfrom
docs/use-isomorphic-layout-effect-server

Conversation

@mnxmnz

@mnxmnz mnxmnz commented Oct 6, 2026

Copy link
Copy Markdown
Member

Overview

The JSDoc of useIsomorphicLayoutEffect listed "Supporting both client and server environments safely" as a use case, which suggests the hook does something on the server. It doesn't: React never runs effects on the server, and on the server this hook is useEffect, which React skips. Its only job is to avoid the useLayoutEffect SSR warning.

  • Removed the misleading bullet and stated that the effect only runs in the browser, and that the hook neither runs anything on the server nor makes the server output match the client.
  • Regenerated the English API page and the skill, and updated the ko, ja, zh-Hans and es pages. The zh-Hans example comment is translated as well.
  • Added a patch changeset, since the JSDoc ships in the published types.

Refs #188. Thanks @jungpaeng for pointing out how the current wording misleads 🙏

Checklist

  • Did you write the test code?
  • Have you run yarn run fix to format and lint the code and docs?
  • Have you run yarn run test:coverage to make sure there is no uncovered line?
  • Did you write the JSDoc?

@mnxmnz mnxmnz self-assigned this Oct 6, 2026
@changeset-bot

changeset-bot Bot commented Oct 6, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 1d21b7f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
react-simplikit Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mnxmnz
mnxmnz requested a review from hyesungoh as a code owner October 6, 2026 15:42
@github-actions

github-actions Bot commented Oct 6, 2026

Copy link
Copy Markdown
Contributor

Size Change: +144 B (+0.13%)

Total Size: 115 kB

📦 View Changed
Filename Size Change
packages/react-simplikit/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs 649 B +72 B (+12.48%) ⚠️
packages/react-simplikit/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs 647 B +72 B (+12.52%) ⚠️
ℹ️ View Unchanged
Filename Size
packages/codemod/dist/cli.mjs 6.47 kB
packages/react-simplikit/dist/components/ImpressionArea/ImpressionArea.cjs 1.01 kB
packages/react-simplikit/dist/components/ImpressionArea/ImpressionArea.mjs 984 B
packages/react-simplikit/dist/components/Separated/Separated.cjs 686 B
packages/react-simplikit/dist/components/Separated/Separated.mjs 684 B
packages/react-simplikit/dist/components/SwitchCase/SwitchCase.cjs 723 B
packages/react-simplikit/dist/components/SwitchCase/SwitchCase.mjs 721 B
packages/react-simplikit/dist/hooks/useAsyncEffect/useAsyncEffect.cjs 625 B
packages/react-simplikit/dist/hooks/useAsyncEffect/useAsyncEffect.mjs 614 B
packages/react-simplikit/dist/hooks/useAvoidKeyboard/useAvoidKeyboard.cjs 985 B
packages/react-simplikit/dist/hooks/useAvoidKeyboard/useAvoidKeyboard.mjs 963 B
packages/react-simplikit/dist/hooks/useBodyScrollLock/useBodyScrollLock.cjs 887 B
packages/react-simplikit/dist/hooks/useBodyScrollLock/useBodyScrollLock.mjs 863 B
packages/react-simplikit/dist/hooks/useBooleanState/useBooleanState.cjs 546 B
packages/react-simplikit/dist/hooks/useBooleanState/useBooleanState.mjs 536 B
packages/react-simplikit/dist/hooks/useCallbackOncePerRender/useCallbackOncePerRender.cjs 815 B
packages/react-simplikit/dist/hooks/useCallbackOncePerRender/useCallbackOncePerRender.mjs 786 B
packages/react-simplikit/dist/hooks/useConditionalEffect/useConditionalEffect.cjs 980 B
packages/react-simplikit/dist/hooks/useConditionalEffect/useConditionalEffect.mjs 959 B
packages/react-simplikit/dist/hooks/useControlledState/useControlledState.cjs 1.04 kB
packages/react-simplikit/dist/hooks/useControlledState/useControlledState.mjs 1.03 kB
packages/react-simplikit/dist/hooks/useCounter/useCounter.cjs 1.03 kB
packages/react-simplikit/dist/hooks/useCounter/useCounter.mjs 1.01 kB
packages/react-simplikit/dist/hooks/useDebounce/debounce.cjs 463 B
packages/react-simplikit/dist/hooks/useDebounce/debounce.mjs 462 B
packages/react-simplikit/dist/hooks/useDebounce/useDebounce.cjs 1.28 kB
packages/react-simplikit/dist/hooks/useDebounce/useDebounce.mjs 1.26 kB
packages/react-simplikit/dist/hooks/useDebouncedCallback/useDebouncedCallback.cjs 1.15 kB
packages/react-simplikit/dist/hooks/useDebouncedCallback/useDebouncedCallback.mjs 1.12 kB
packages/react-simplikit/dist/hooks/useDebouncedValue/useDebouncedValue.cjs 1.21 kB
packages/react-simplikit/dist/hooks/useDebouncedValue/useDebouncedValue.mjs 1.18 kB
packages/react-simplikit/dist/hooks/useDoubleClick/useDoubleClick.cjs 965 B
packages/react-simplikit/dist/hooks/useDoubleClick/useDoubleClick.mjs 950 B
packages/react-simplikit/dist/hooks/useGeolocation/useGeolocation.cjs 2.02 kB
packages/react-simplikit/dist/hooks/useGeolocation/useGeolocation.mjs 2.02 kB
packages/react-simplikit/dist/hooks/useImpressionRef/useImpressionRef.cjs 1.25 kB
packages/react-simplikit/dist/hooks/useImpressionRef/useImpressionRef.mjs 1.22 kB
packages/react-simplikit/dist/hooks/useInputState/useInputState.cjs 672 B
packages/react-simplikit/dist/hooks/useInputState/useInputState.mjs 662 B
packages/react-simplikit/dist/hooks/useIntersectionObserver/useIntersectionObserver.cjs 1.1 kB
packages/react-simplikit/dist/hooks/useIntersectionObserver/useIntersectionObserver.mjs 1.07 kB
packages/react-simplikit/dist/hooks/useInterval/useInterval.cjs 837 B
packages/react-simplikit/dist/hooks/useInterval/useInterval.mjs 811 B
packages/react-simplikit/dist/hooks/useIsClient/useIsClient.cjs 585 B
packages/react-simplikit/dist/hooks/useIsClient/useIsClient.mjs 574 B
packages/react-simplikit/dist/hooks/useKeyboardHeight/useKeyboardHeight.cjs 736 B
packages/react-simplikit/dist/hooks/useKeyboardHeight/useKeyboardHeight.mjs 717 B
packages/react-simplikit/dist/hooks/useList/useList.cjs 952 B
packages/react-simplikit/dist/hooks/useList/useList.mjs 930 B
packages/react-simplikit/dist/hooks/useLoading/useLoading.cjs 919 B
packages/react-simplikit/dist/hooks/useLoading/useLoading.mjs 909 B
packages/react-simplikit/dist/hooks/useLongPress/useLongPress.cjs 1.71 kB
packages/react-simplikit/dist/hooks/useLongPress/useLongPress.mjs 1.68 kB
packages/react-simplikit/dist/hooks/useMap/useMap.cjs 762 B
packages/react-simplikit/dist/hooks/useMap/useMap.mjs 745 B
packages/react-simplikit/dist/hooks/useNetworkStatus/useNetworkStatus.cjs 1.61 kB
packages/react-simplikit/dist/hooks/useNetworkStatus/useNetworkStatus.mjs 1.59 kB
packages/react-simplikit/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.cjs 785 B
packages/react-simplikit/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.mjs 755 B
packages/react-simplikit/dist/hooks/usePageVisibility/usePageVisibility.cjs 1.28 kB
packages/react-simplikit/dist/hooks/usePageVisibility/usePageVisibility.mjs 1.25 kB
packages/react-simplikit/dist/hooks/usePreservedCallback/usePreservedCallback.cjs 751 B
packages/react-simplikit/dist/hooks/usePreservedCallback/usePreservedCallback.mjs 733 B
packages/react-simplikit/dist/hooks/usePreservedReference/usePreservedReference.cjs 805 B
packages/react-simplikit/dist/hooks/usePreservedReference/usePreservedReference.mjs 789 B
packages/react-simplikit/dist/hooks/usePrevious/usePrevious.cjs 643 B
packages/react-simplikit/dist/hooks/usePrevious/usePrevious.mjs 635 B
packages/react-simplikit/dist/hooks/useRefEffect/useRefEffect.cjs 836 B
packages/react-simplikit/dist/hooks/useRefEffect/useRefEffect.mjs 820 B
packages/react-simplikit/dist/hooks/useSafeAreaInset/useSafeAreaInset.cjs 942 B
packages/react-simplikit/dist/hooks/useSafeAreaInset/useSafeAreaInset.mjs 927 B
packages/react-simplikit/dist/hooks/useScrollDirection/useScrollDirection.cjs 1.34 kB
packages/react-simplikit/dist/hooks/useScrollDirection/useScrollDirection.mjs 1.33 kB
packages/react-simplikit/dist/hooks/useSet/useSet.cjs 1.03 kB
packages/react-simplikit/dist/hooks/useSet/useSet.mjs 1 kB
packages/react-simplikit/dist/hooks/useStorageState/storage.cjs 543 B
packages/react-simplikit/dist/hooks/useStorageState/storage.mjs 527 B
packages/react-simplikit/dist/hooks/useStorageState/useStorageState.cjs 973 B
packages/react-simplikit/dist/hooks/useStorageState/useStorageState.mjs 964 B
packages/react-simplikit/dist/hooks/useThrottle/throttle.cjs 431 B
packages/react-simplikit/dist/hooks/useThrottle/throttle.mjs 422 B
packages/react-simplikit/dist/hooks/useThrottle/useThrottle.cjs 864 B
packages/react-simplikit/dist/hooks/useThrottle/useThrottle.mjs 838 B
packages/react-simplikit/dist/hooks/useThrottledCallback/useThrottledCallback.cjs 1.02 kB
packages/react-simplikit/dist/hooks/useThrottledCallback/useThrottledCallback.mjs 993 B
packages/react-simplikit/dist/hooks/useThrottledValue/useThrottledValue.cjs 1.15 kB
packages/react-simplikit/dist/hooks/useThrottledValue/useThrottledValue.mjs 1.12 kB
packages/react-simplikit/dist/hooks/useTimeout/useTimeout.cjs 627 B
packages/react-simplikit/dist/hooks/useTimeout/useTimeout.mjs 600 B
packages/react-simplikit/dist/hooks/useToggle/useToggle.cjs 524 B
packages/react-simplikit/dist/hooks/useToggle/useToggle.mjs 506 B
packages/react-simplikit/dist/hooks/useVisibilityEvent/useVisibilityEvent.cjs 692 B
packages/react-simplikit/dist/hooks/useVisibilityEvent/useVisibilityEvent.mjs 674 B
packages/react-simplikit/dist/hooks/useVisualViewport/useVisualViewport.cjs 1.54 kB
packages/react-simplikit/dist/hooks/useVisualViewport/useVisualViewport.mjs 1.53 kB
packages/react-simplikit/dist/index.cjs 1.39 kB
packages/react-simplikit/dist/index.mjs 1.01 kB
packages/react-simplikit/dist/utils/buildContext/buildContext.cjs 864 B
packages/react-simplikit/dist/utils/buildContext/buildContext.mjs 844 B
packages/react-simplikit/dist/utils/disableBodyScrollLock/disableBodyScrollLock.cjs 667 B
packages/react-simplikit/dist/utils/disableBodyScrollLock/disableBodyScrollLock.mjs 660 B
packages/react-simplikit/dist/utils/enableBodyScrollLock/enableBodyScrollLock.cjs 663 B
packages/react-simplikit/dist/utils/enableBodyScrollLock/enableBodyScrollLock.mjs 652 B
packages/react-simplikit/dist/utils/getKeyboardHeight/getKeyboardHeight.cjs 609 B
packages/react-simplikit/dist/utils/getKeyboardHeight/getKeyboardHeight.mjs 602 B
packages/react-simplikit/dist/utils/getSafeAreaInset/getSafeAreaInset.cjs 902 B
packages/react-simplikit/dist/utils/getSafeAreaInset/getSafeAreaInset.mjs 893 B
packages/react-simplikit/dist/utils/isAndroid/isAndroid.cjs 543 B
packages/react-simplikit/dist/utils/isAndroid/isAndroid.mjs 534 B
packages/react-simplikit/dist/utils/isIOS/isIOS.cjs 753 B
packages/react-simplikit/dist/utils/isIOS/isIOS.mjs 746 B
packages/react-simplikit/dist/utils/isKeyboardVisible/isKeyboardVisible.cjs 431 B
packages/react-simplikit/dist/utils/isKeyboardVisible/isKeyboardVisible.mjs 419 B
packages/react-simplikit/dist/utils/isServer/isServer.cjs 381 B
packages/react-simplikit/dist/utils/isServer/isServer.mjs 379 B
packages/react-simplikit/dist/utils/mergeProps/mergeProps.cjs 645 B
packages/react-simplikit/dist/utils/mergeProps/mergeProps.mjs 643 B
packages/react-simplikit/dist/utils/mergeRefs/mergeRefs.cjs 790 B
packages/react-simplikit/dist/utils/mergeRefs/mergeRefs.mjs 787 B
packages/react-simplikit/dist/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.cjs 1.12 kB
packages/react-simplikit/dist/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs 1.1 kB

compressed-size-action

@codecov-commenter

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (5ed94bd) to head (1d21b7f).

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff            @@
##              main      #557   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           69        69           
  Lines         2280      2280           
  Branches       737       737           
=========================================
  Hits          2280      2280           
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Comment on lines +3 to +5
`useIsomorphicLayoutEffect`는 서버 사이드 렌더링 중에 경고를 일으키지 않고 브라우저에서 `useLayoutEffect`를 실행하는 리액트 훅이에요. SSR 환경에서는 동기적으로 측정하거나 변경할 DOM이 없기 때문에, `useLayoutEffect`를 사용하면 리액트가 경고를 보내요.

리액트는 서버에서 effect를 실행하지 않으므로 effect는 브라우저에서만 실행돼요. 서버에서 이 훅은 `useEffect`이고, 리액트는 이를 실행하지 않아요. 이 훅은 경고를 피하기 위해서만 존재해요. 서버에서 아무것도 실행하지 않으며, 서버 출력을 클라이언트와 맞춰 주지도 않아요.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`useIsomorphicLayoutEffect`는 서버 사이드 렌더링 중에 경고를 일으키지 않고 브라우저에서 `useLayoutEffect`를 실행하는 리액트 훅이에요. SSR 환경에서는 동기적으로 측정하거나 변경할 DOM이 없기 때문에, `useLayoutEffect`를 사용하면 리액트가 경고를 보내요.
리액트는 서버에서 effect를 실행하지 않으므로 effect는 브라우저에서만 실행돼요. 서버에서 이 훅은 `useEffect`이고, 리액트는 이를 실행하지 않아요. 이 훅은 경고를 피하기 위해서만 존재해요. 서버에서 아무것도 실행하지 않으며, 서버 출력을 클라이언트와 맞춰 주지도 않아요.
`useIsomorphicLayoutEffect`는 서버 사이드 렌더링 중에 경고를 일으키지 않고 브라우저에서 `useLayoutEffect`를 실행하는 리액트 훅이에요. SSR 환경에서는 동기적으로 측정하거나 변경할 DOM이 없기 때문에, `useLayoutEffect`를 사용하면 리액트가 경고를 보내요. (보내요...?! 더 적절한 단어가 있을지 고민이네요 ..) 이 훅은 경고를 피하기 위해서만 존재해요. 서버에서 아무것도 실행하지 않으며, 서버 출력을 클라이언트와 맞춰 주지도 않아요.

이렇게 한 문단으로 적어볼 수도 있을거 같아요 ! 🤔

'서버에서 이 훅은 useEffect이고, 리액트는 이를 실행하지 않아요.' < 요것은 구현에 대한 세부사항을 드러내는 것 아닐까 싶기도 하구요 🤔 🤔 🤔 (물론 간단하고 + 개발자가 알고 사용하면 좋긴 할거라 공감도 돼요 🤔 )

이 부분에 대해서는 어떻게 생각하시나요 ??!

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"useLayoutEffect를 사용하면 리액트가 경고를 보내요." -> "useLayoutEffect를 사용하면 경고가 발생해요."

여기서는 굳이 "리액트"가 붙지 않아도 괜찮을거 같아요.
"보내요" 자체가 React시점이기 때문에 조금 어색하게 느껴지는거 아닐까 생각이 듭니다.
문서를 읽는 독자 시점에서는 누가 경고를 보내는지보다 어떤 상황에서 경고가 발생하는지에 대한 여부만 아는 형태면 될거같아요.
조금 더 독자에게 필요한 정보에 초점을 맞추는 형태(?)로 전환하는건 어떨까요 ?

@Antoliny0919

Copy link
Copy Markdown
Contributor

This isn’t directly related to the current change, but I noticed that this file also has its own check for whether it’s running on the server.


It might be worth reusing the existing isServer utility.
Since both checks serve the same purpose, keeping the logic in one place would ensure they stay in sync if the criteria change.

This isn’t urgent, so how about addressing it in a separate follow up? 😁
(The utility may not have existed when the hook was originally written.)

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants