deve.K

エンジニアが未来を切り開く。

React Hook useEffectとuseLayoutEffectの違い 基礎

react画像

本日の記事は『useEffect』と『useLayoutEffect』の違いを解説致します。

useLayoutEffectとuseEffectの違い

こちらのフックは、ほぼ『useEffect』フックと同様の機能を備えております。

唯一の違いとしては『全ては実行時のタイミング』となります。

『useEffect』はコンポーネントのマウント時に非同期で呼び出され、例えばですが『useEffect』は『状態や小道具』の一部を、すぐに実行する必要がないものだったり、またはページに視覚的に影響を与えないものとなります。

データをフェッチする時と同様に、すぐに変更されることはありません。

また、イベントハンドラーの設定やモーダルの『表示』『非表示』になったときに状態をリセットする場合などとなります。

『useLayoutEffect』は同期効果があります。

このフックは、DOMにデータを同期的にロードするために使用され、useEffectフックと同じ機能を致します。

状態を更新して同期的に再レンダリングをトリガーする必要がある場合に役立ちます。

それでは簡単な例で比べてみましょう

useLayoutEffect例

// useEffectフック

import { useState, useEffect } from 'react';

const App = () =>{

  const [count, setCount] = useState(100);

  useEffect(() => {
    setCount(0);
  }, []);
  return <div>{count}</div>;
}

export default App;

上記をブラウザで確認してみて下さい

useEffect()の場合は、一瞬ですが数字の『100』が表示された後に、『0』が表示されます。

これは一度、画面に描画された値が『useEffect()』内の処理が実行される動作となっております。

では、次にこれを『useLayoutEffect()』の場合での挙動を見てみましょう。

//useLayoutEffectフック

import { useState, useLayoutEffect } from 'react';

const App = () => {
  const [count, setCount] = useState(100);

  useLayoutEffect(() => {
    setCount(0);
  }, []);
  return <div>{count}</div>;
}

export default App;

『useLayoutEffct』フックでは画面が描写される前に実行されるので、初期値である『100』が画面に表示されることはなく『0』が表示されます。

useLayoutEffectフックが同期的に呼び出されるので、コンポーネントがマウントされる前に状態が更新されます。

仮に、コンポーネントが2回レンダリングされたとしても、『useLayoutEffect』は視覚的に1回だけ更新されます。

そして、エフェクトの実行が終了するまでアプリは視覚的に更新はされずに、ほとんどは実行中に一時停止する必要がない事になります。

useLayoutEffectは同期的であるため、使用する場合は注意が必要となります。

つまりReactコンポーネントが一瞬、一時停止します。

これは、何かが終了するのを『待機』しているとう言う事になります。

この動作によりパフォーマンスが低下する可能性があります。

それは、メソッドの実行が終了するまでUIは更新されないからです。

import { useState, useLayoutEffect } from 'react';

const App = () => {
    const [number, setNumBer] = useState(0);

  useLayoutEffect(() => {
    if (number === 0) {
      setNumBer(10 + Math.random() * 200)
    }
  }, [number])

  return (
   <div>
   <button onClick={() => setNumBer(0)}>
     value:{number}
    </button>
   </div>
    );
  }

export default App;

上記では、ボタンをクリックすると、状態がすぐに変化し0にリセットされます。

コンポーネントが再レンダリングされた後に、エフェクトが実行され値が乱数に設定され、コンポーネントは再度レンダリングされます。

これらフックを使用するときは、『useEffect』と『useLayoutEffect』で同期と非同期で切り替えて上手く活用していって下さい。

本日は以上となります。

最後までこの記事を読んで頂きありがとうございます。

プライバシーポリシー