React でレンダリングを遅延させたい

React でレンダリングを遅延させたいということがありまして。

const Todesking = ()=> {
  return <>
    <LightComponent />
    <UltraHeavyComponent />
  </>
}

このようなコンポーネント。 LightComponent のレンダリングは一瞬、UltraHeavyComponent は複雑な state の処理が遅い。で、 LightComponent の中身はとりあえずさっさと表示しておくと UX が向上する、というような事例。そういうことありませんかね?

そこで以下のようなことをした。

const useDelay = msec => {
  const [waiting, setWaiting] = useState(true);
  useEffect(()=>{
    setTimeout(()=> setWaiting(false), msec);
  }, []);
  return waiting
}

const Todesking = ()=> {
  const waiting = useDelay(200);
  
  return <>
    <LightComponent />
    {!waiting && <UltraHeavyComponent />}
  </>
}

指定した msec だけレンダリングの発生を遅延させる。今回はトランジションとのかねあいなどでレンダリング開始を遅延させる時間を場面ごとに調整したかったので、こんな感じのカスタムフックを作ってみました。

完全なる大破滅、こんなことをするなら UltraHeavyComponent をどうにかしろという話なのですが、とりあえず逃げなければならない時だってある。

Diary

@ssig33