useEffectを利用した簡単なFOUC対策

FOUCとは

ページを読み込んだ際、スタイルが適用されていない状態が一瞬表示されてしまう現象をFOUC（Flash of unstyled content）といいます。少し遅れてスタイルが適用されるので画面のちらつきが発生します。

useEffectの実行タイミング

React公式ページに次のような説明があります。

useEffect を呼ぶことで、DOM への更新を反映した後にあなたが定義する「副作用関数」を実行するように React に指示します。

https://ja.reactjs.org/docs/hooks-overview.html#effect-hook

つまり、 useEffect内の処理はレンダリングの後に実行されるということです。

本題

useEffectのこの性質を利用して、 FOUCが発生するレンダリングの前は<></>を表示する というのが今回の結論です。
useStateでレンダリングが完了したかどうかを表すフラグを用意し、useEffect内でstateの更新関数を実行することでそれを実現します。

const App = () => {
  const [isRendered, setIsRendered] = useState(false);

  useEffect(() => {
    setIsRendered(true);
  }, []);

  return isRendered ? (
    <>レンダリング後に表示するコンテンツ</>  
  ) : (
    <></>
  );
};