useIsomorphicLayoutEffect

useIsomorphicLayoutEffect는 서버 사이드 렌더링 환경에서도 동기적으로 실행되도록 보장하는 커스텀 훅 입니다.

client환경에서는 useLayoutEffect를 사용하고, server환경에서는 useEffect를 사용합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

const useIsomorphicLayoutEffect: (
  effect: React.EffectCallback, 
  deps?: React.DependencyList | undefined
) => void;

Usage

typescript

import { useIsomorphicLayoutEffect } from '@modern-kit/react';

const Example = () => {
  useIsomorphicLayoutEffect(() => {
    console.log(
      "client 환경에서는 useLayoutEffect, server 환경에서는 useEffect 입니다.",
    )
  }, []);

  return <div>{/* ... */}</div>;
};