useLayoutEffect
from React Hooks
やっていることはuseEffectと同じだが、実行されるタイミングが異なる
useLayoutEffectの方が先に実行される
基本的にuseEffectを使うことが推奨されている
cleanUp関数に関してはまだメモってない
何でこんなにわかりにくくかけるのかわからん
用語の区別と、流れがわかっていないと全く理解できない
①rendering
Stateを元に、DOMの差分計算して仮想DOMの構築までを指す
②DOM更新
①でできた仮想DOMを、本物のDOMに適用する
③描画
②で適用したものが実際に、ブラウザの画面に表示される
ユーザーが変更に気付けるタイミング
ユーザー目線ではさっさと③が完了してくれると嬉しい
たぶんPaintingのこと
③が完了したあとに実行される
useEffect内の処理よりも、rendering結果の描画を優先して行っている
ref で更新後のDOM Objectを取得できる ref画面がちらつく例
useEffectの中でrefを見て中身を変更する
tsxconst Foo = () => {
const pRef = useRef();
useEffect(() => {
pRef.current.textContent = "あと";
}, []);
return <p ref={pRef}>まえ</p>;
};こういう流れになる
①~③で
まえ を表示useEffectで中身を変更
あと を表示故に、一瞬だけ
まえ が表示される画面の表示に影響を与えないものはこちらにかくといい
殆どの場合こちら
useLayoutEffect
②と③の間に同期的に実行
つまりuseLayoutEffect内の処理が完了するまで③に進まない
この処理が重い場合、ページが表示されるまでに時間がかかる
componentDidMount, componentDidUpdateと同じタイミング
useLayoutEffectが適しているケース
いずれにせよ、まずuseEffectで書いてみて問題がある場合に工夫して、その後useLayoutEffectの仕様を検討すると良い
初期表示した時点で絶対に実行しておきたい処理
画面に影響を与える処理
ref内で表示内容を変えるなどもこれに含まれる
その処理がDOMを更新する場合
その処理がDOMから得られる情報を使用する場合
要素のスクロール位置、他のスタイルの取得など
これほんまか #??
参考
いろいろ読んだが、これが一番わかりやすかった
これ合ってるのか？？
https://ics.media/entry/201106/ のuseEffectの説明
>useEffectはDOMの変更を待たずに非同期で呼び出されるために、コールバック関数の処理が完了する前のDOMがユーザーに一瞬見えてしまうことがあります。
前半が何のことを言っているのかわからん