useEffect vs useLayoutEffect意訳

React

useEffect

99％の時間これがあなたが望むものです。フックが安定していて、
フックを使用するようにクラスコンポーネントのいずれかをリファクタリングした場合、
おそらくすべてのコードをcomponentDidMount、componentDidUpdate、およびcomponentWillUnmountからuseEffectに移動します。

1つの注意点は、reactがコンポーネントをレンダリングした後に実行され、
エフェクトのコールバックによってブラウザの描画がブロックされないようにすることです。
これは、componentDidMountとcomponentDidUpdateがレンダリング後に同期的に実行されるクラスコンポーネントの動作とは異なります。

これはより高性能であり、ほとんどの場合これはあなたが望むものです。

useLayoutEffect

しかし、あなたのEffectが（DOMノード参照を介して）DOMを変化させていて、DOM変化がレンダリングされてからあなたのEffectがそれを変化させるまでの間にDOMノードの外観を変えるなら、

あなたはuseEffectを使いたくありません。 。

useLayoutEffectを使用したいと思うでしょう。

うしないと、DOMの変更が有効になったときにユーザーにちらつきが見られる可能性があります。

useEffectを避けて代わりにuseLayoutEffectを使用するのは、これがほとんど唯一の場合です。

これはReactがすべてのDOM変異を実行した直後に同期的に実行されます。

これは、DOM測定を行い（要素のスクロール位置や他のスタイルを取得するなど）、

DOMを変更したり、状態を更新して同期再レンダリングをトリガーしたりする必要がある場合に便利です。

スケジューリングに関しては、
これはcomponentDidMountおよびcomponentDidUpdateと同じように機能します。

あなたのコードはDOMが更新された直後、
しかしブラウザがそれらの変更を「ペイント」する機会がある前に実行されます（ブラウザは再描画されるまで実際には更新を見ません）。

useLayoutEffect：DOMを変更する必要がある場合、および/またはDOが測定を実行する必要がある場合

useEffect：DOMとやり取りする必要がまったくない場合、またはDOMの変更を確認できない場合（真剣に、ほとんどの場合これを使用する必要があります）。

続きを読む →

続きを読む →

続きを読む →