useIsomorphicLayoutEffect

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

클라이언트 환경에서는 useLayoutEffect를 사용하고, 서버 환경에서는 useEffect를 사용합니다.

React의 useLayoutEffect는 서버 사이드 렌더링 시 경고가 발생할 수 있으므로, 이를 방지하기 위해 서버에서는 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>;
};