@modern-kit/react
Version:
1 lines • 1.46 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useIsClient/index.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\nimport { noop } from '@modern-kit/utils';\n\nconst subscribe = () => noop;\nconst getSnapshot = () => true;\nconst getServerSnapshot = () => false;\n\n/**\n * @description 현재 렌더링 환경이 클라이언트인지 여부를 반환하는 커스텀 훅입니다.\n *\n * mount 여부를 확인하는 것이 아니라 현재 렌더링 환경이 클라이언트인지 여부를 확인합니다.\n * - mount 여부를 확인하려면 `useIsMounted`를 사용하세요.\n *\n * 일반적인 `useEffect`를 사용하여 클라이언트 환경임을 감지할 경우 다음과 같은 문제가 발생할 수 있습니다:\n * - 초기 렌더링에서 false를 반환\n * - `useEffect` 실행 후 true를 반환하는 `이중 렌더링` 발생\n *\n * @returns {boolean} 클라이언트 환경이면 true, 서버 환경이면 false를 반환합니다.\n *\n * @example\n * ```tsx\n * const isClient = useIsClient();\n *\n * return <div>{isClient ? 'client' : 'server'}</div>\n * ```\n */\nexport const useIsClient = (): boolean =>\n useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n"],"names":["noop","useSyncExternalStore"],"mappings":";;;;;AAGA,MAAM,YAAY,MAAMA,UAAA;AACxB,MAAM,cAAc,MAAM,IAAA;AAC1B,MAAM,oBAAoB,MAAM,KAAA;AAqBzB,MAAM,WAAA,GAAc,MACzBC,0BAAA,CAAqB,SAAA,EAAW,aAAa,iBAAiB;;;;"}