React の再レンダリングを防ぐ3つのパターン

React のパフォーマンスについて語るとき、コンポーネントの再レンダリングは外せない話題となるでしょう。React は以下の条件のときに再レンダリングが発生します。 コンポーネントの state が更新された 親のコンポーネントが再レンダリングされた 例えば典型的なカウンターアプリのように、ボタンをクリックしたとき count state を更新する場合には必要な再レンダリングといえます。状態が更新されても再レンダリングされなければ、表示されるカウント数は一向に「0」のままですから。 import { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count

[youko03]

"リフトダウンパターンとの違いは、非常に遅いコンポーネントを children として切り出したコンポーネントに渡すところです。children は単なる Prop ですので、状態の変化を受けないため、再レンダリングされません。"

[carolina04]

“React は以下の条件のときに再レンダリングが発生します。 コンポーネントの state が更新された 親のコンポーネントが再レンダリングされた”