useLayoutEffect(2) SSR

Lifecycle

• 컴포넌트가 render된 후 실행됨
• useEffect와 다르게 동기적으로 실행
• 동기적으로 실행되기 때문에 로직이 클 경우 그만큼 화면에 보여지는 시간이 오래걸리게 되므로 간단한 로직들만 넣어서 사용한다.
• SSR일 때 useEffect, useLayoutEffect 둘 다 JS가 다운로드된 이후에 수행된다는 것을 명심하자
  • react가 warning을 주는 이유가 이 때문이다.

 

useLayoutEffect를 사용하면 마주하는 warning

⚠️ 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. See https://fb.me/react-uselayouteffect-ssr for common fixes.

• SSR에서 *Effect는 서버사이드에서 수행되지 않는다.

 

사용하려면 어떻게 ?

• 로직들을 useEffect로 이동시키거나 랜더링될 때까지 컴포넌트를 지연시키는 것
  • useLayoutEffect가 실행될 때까지 아예 안보이게 처리하는것(..!)
• window가 없을때(서버사이드)는 useEffect를 호출하는 hook를 작성해서 사용

 

예제

import axios from "axios";
import useIsomorphicEffect from "hooks/useIsomorphicEffect";
import React, {
  Dispatch,
  SetStateAction,
  useEffect,
  useState,
} from "react";

interface IProps {}

const layout: React.FC<IProps> = ({}) => {
  const [data, setData] = useState("Hello useEffect");
  const [data2, setData2] = useState(null);
  const isomorphicEffect = useIsomorphicEffect();
  const requestData = async (setCallback: Dispatch<SetStateAction<any>>) => {
    const res = await axios.get("/api/ss/test");
    setCallback(res.data.data);
  };
  isomorphicEffect(() => {
    requestData(setData2);
  }, []);

  if (!data) return null;
  useEffect(() => {
    requestData(setData);
  }, []);

  return (
    <div>
      <div>{data}</div>
      <div>{data2}</div>
    </div>
  );
};
export default layout;

import React, { useEffect, useLayoutEffect } from "react";

const useIsomorphicEffect = () => {
  return typeof window !== "undefined" ? useLayoutEffect : useEffect;
};
export default useIsomorphicEffect;

결론

• SSR에서 layoutEffect를 정 쓰고싶으면 랜더링을 지연 시켜서 그렇게 동작하는 것 처럼 보이게 해라 !