​​React​flushSync,Playwright,TypeScript,useState

Thumbnail of post image 032

React 18以降のcreateRootでは、setTimeoutやPromiseの中で続けて呼んだstateの更新も、1回の描画にまとめられます。React 17・18・19で描画の回数を数え、まとめられない書き方も確かめました。 ...

​​React​Playwright,TypeScript,useEffect,useRef,useState

Thumbnail of post image 062

Reactでstateを更新した直後の行では、画面(DOM)はまだ古いままです。flushSyncで包むと、次の行に進む前に画面が更新されます。スクロールと印刷の例で確かめ、エフェクトの中で呼んだときの警告と描画の回数も調べました。

​​React​Playwright,TypeScript,サーバーレンダリング

Thumbnail of post image 085

React 19では、サーバーのHTMLとブラウザの描画が食い違うと、エラーが1件にまとまり、どの部品のどの値が違うかが差分で出ます。同じ食い違いをReact 18と19で描き、出たエラーを並べて比べました。

​​React​Playwright,TypeScript,useEffect,useLayoutEffect

Thumbnail of post image 178

useLayoutEffectは、ブラウザが画面を描く前に動きます。高さを測って位置を決めるツールチップを両方のフックで作り、Chromiumで描かれたフレームを記録して、useEffectでだけ出たちらつきと、その防ぎ方を紹介します ...