useLayoutEffect

useLayoutEffectの方が先に実行される

何でこんなにわかりにくくかけるのかわからん

用語の区別と、流れがわかっていないと全く理解できない

①rendering

Stateを元に、DOMの差分計算して仮想DOMの構築までを指す

②DOM更新

①でできた仮想DOMを、本物のDOMに適用する

③描画

②で適用したものが実際に、ブラウザの画面に表示される

ユーザーが変更に気付けるタイミング

ユーザー目線ではさっさと③が完了してくれると嬉しい

③が完了したあとに実行される

useEffect内の処理よりも、rendering結果の描画を優先して行っている

画面がちらつく例

useEffectの中でrefを見て中身を変更する

code:tsx

const Foo = () => {

const pRef = useRef();

useEffect(() => {

pRef.current.textContent = "あと";

}, []);

return <p ref={pRef}>まえ</p>;

};

こういう流れになる

useEffectで中身を変更

画面の表示に影響を与えないものはこちらにかくといい

殆どの場合こちら

useLayoutEffect

②と③の間に同期的に実行

つまりuseLayoutEffect内の処理が完了するまで③に進まない

この処理が重い場合、ページが表示されるまでに時間がかかる

componentDidMount, componentDidUpdateと同じタイミング

useLayoutEffectが適しているケース

初期表示した時点で絶対に実行しておきたい処理

画面に影響を与える処理

ref内で表示内容を変えるなどもこれに含まれる

その処理がDOMを更新する場合

その処理がDOMから得られる情報を使用する場合

要素のスクロール位置、他のスタイルの取得など

参考

いろいろ読んだが、これが一番わかりやすかった

これ合ってるのか？？

useEffectはDOMの変更を待たずに非同期で呼び出されるために、コールバック関数の処理が完了する前のDOMがユーザーに一瞬見えてしまうことがあります。