useEffect
는 컴포넌트들이 render, paint 된 이후에 비동기적(asynchronous)으로 실행된다.useLayoutEffect
는 컴포넌트들이 render 된 이후에 실행되며, 동기적(synchronous)으로 실행된 다음 paint를 수행하게 된다.
Warning:
useLayoutEffect
does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this,useLayoutEffect
should only be used in components that render exclusively on the client.
- SSR 환경에서
useEffect
,useLayoutEffect
에 전달한 코드는 자바스크립트가 모두 다운로드 될 때까지 실행되지 않으며, 브라우저에서 paint 단계를 수행한 이후에useLayoutEffect
->useEffect
순으로 실행된다. - SSR 환경에서
useLayoutEffect
를 직접 사용하면 경고를 노출하는 이유는,useEffect
는 pre-render 된 HTML이 브라우저 상에서 paint 된 이후에 실행되더라도 기본 동작 방식과 동일하지만,useLayoutEffect
의 경우에는 paint 이전에 실행되어야 하는 코드이므로 명시적으로 브라우저에서만 실행되는 코드에만 적용해야 하기 때문이다.
import { useLayoutEffect, useEffect } from 'react';
const canUseDOM = () =>
Boolean(
typeof window !== "undefined" &&
window.document &&
window.document.createElement
);
const useIsomorphicLayoutEffect = canUseDOM()
? useLayoutEffect
: useEffect;
export { useIsomorphicLayoutEffect as default };