useLayoutEffect使ってみた！！

はじめに

React Hooksの中にはuseLayoutEffectがある。らしい。。。触ったことがなかったので、理解するために記事にしていきます。

useLayoutEffectって何？？

公式ドキュメントを読んでみる。

パフォーマンスに影響出るから、useEffectを優先して使ってとのこと。

・パフォーマンス的に影響があるらしい。
・ブラウザが画面を再描画する前に発火するuseEffectのバージョンです。

→同期的にやっているのかな？？

実装と挙動

いいサンプルがなかったので、zennの乗っていた記事を参考にさせてもらいました。

useEffectは0→100なのでチラつきが見えます。ただ、useLayoutEffectではチラつきがないです。

import React, { useEffect, useLayoutEffect, useState } from 'react';

function App() {

  return (
    <>
      <EffectExample />
      <LayoutEffectExample />
      </>
  );
}

export default App;


function EffectExample() {
  const [count, setCount] = useState(0);
  const onClickZero = () => setCount(0);
 
  useEffect(() => {
    if (count === 0) setCount(100)
  }, [count])

   return (
     <div>
       <p>useEffect実行：{count}</p>
       <button onClick={onClickZero}>0にする</button>
     </div>
   );
}


function LayoutEffectExample() {
  const [count, setCount] = useState(0);
  const onClickZero = () => setCount(0);
 
   useLayoutEffect(() => {
    if (count === 0) setCount(100)
   }, [count])

   return (
     <div>
       <p>useLayoutEffect実行：{count}</p>
       <button onClick={onClickZero}>0にする</button>
     </div>
   );
}

参考文献