useEffect vs useLayoutEffect

今日はuseEffectとuseLayoutEffectの違いを学びたいと思います.
まず、2つのプロセスを理解する必要があります.

Renderer:DOM Treeを構成するために各エンティティのスタイル属性を計算するプロセス

Paint:リアル画面でLayoutを表示・更新するプロセス

写真ソース

useEffect

userEffectは、構成部品のレンダリングと塗装後に実行されます.
非同期(非同期)運転.
図を描いた後に実行されるので、UseEffectの内部にdomに影響を与えるコードが表示されると画面が点滅します.

写真ソース

useLayoutEffect

userLayoutEffectは、エレメントレンダリング後に実行され、paintになります.
この操作は同期で実行されます.
paintの前に実行されるためdomを処理するコードが存在してもユーザは点滅を体験しない.

では、いつUserEffectを使い、いつUserLayoutEffectを使うのでしょうか。

両者の違いから、点滅しないuseLayoutEffectを使った方が良いと思います.
ただし、ユーザLayoutEffectは同期して実行されるため、ユーザがレイアウトを表示するのに時間がかかる場合(ユーザが実行してペイント操作を行うため)、ユーザはレイアウトを表示するのに時間がかかる場合がある.
したがって、デフォルトではuserEffectを使用した方がよい.
例えば、データ取得、イベントハンドラ、ステータスリセット

では、useEffectだけを使用してuseLayoutEffectを使用しませんか?

サンプルコード

import { useLayoutEffect, useState } from "react";

const Test = () => {
  const [value, setValue] = useState(0);

  useLayoutEffect(() => {
    if (value === 0) {
      setValue(10 + Math.random() * 200);
    }
  }, [value]);

  console.log("render", value);

  return <button onClick={() => setValue(0)}>value: {value}</button>;
};

export default Test;

useLayoutEffectは、上記の場合に使用できます.
実際のテストでは、userLayoutEffectのユーザー体験がより良いことが明らかになりました.
テストした動画をgifにアップロードするのですが、あまり差がないように見えたのでアップロードできませんでした
ユーザLayoutEffectはDOMを描画する前に呼び出されるので、レンダリングする状態を効果領域内で初期化する必要がある場合は、ユーザエクスペリエンスを利用するユーザLayoutEffectをお勧めします.
この文章を読むともっと分かりやすい。

振り返る🤔

より良い体験を得るためにuseLayoutEffectを適切に使うべきだと思います.
応答式ドキュメントを表示する場合はuseEffectを使用し、問題が発生した場合はuseLayoutEffectを使用します.useEffectとuseLayoutEffectは別々に書かれていますが、場合によっては自分で手を出して、いつ使うのが正しいのかをゆっくり知る必要があります…!

リファレンス

📌 https://medium.com/@jnso5072/react-useeffect-%EC%99%80-uselayouteffect-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-e1a13adf1cd5
📌 https://merrily-code.tistory.com/46