📑
Reactの意図していない再レンダリングの解決策
どんなときに再レンダリングが起きるのか
- stateが更新されたコンポーネントは再レンダリング
- propsが変更されたコンポーネントは再レンダリング
- 再レンダリングされたコンポーネント配下の子要素は再レンダリング
親コンポーネントが再レンダリングされた時の子コンポーネント再レンダリング防止法(コンポーネントのmemo化)
import { memo } from "react";
export const ChildArea = memo((props) => {
~コンポーネント内の記述〜
})
このように、コンポーネントをmemoで囲むことによって、親コンポーネントがレンダリングされても、際レンダリングを防止することができる。
-
memo化したのに、子コンポーネントが再レンダリングしてしまう罠
原因:親コンポーネントから、propsとして関数を受け取っている場合、その関数をこコンポーネント内で使用すると際レンダリングが起こってしまう。
親コンポーネントのコード
function App() { const [open, setOpen] = useState(false); const onClickClose = () => setOpen(false); return ( <div className="App"> <input value={text} onChange={onChangeText} /> <button onClick={onClickOpen}>表示</button> <ChildArea open={open} onClickClose={onClickClose} /> </div> ); };
子コンポーネントのコード
import { memo } from "react"; export const ChildArea = memo((props) => { ~コンポーネント内の記述〜 return ( <> {open ? ( <div style={style}> このボタンが押されると親コンポーネント内の関数なのに、 子コンポーネントが再レンダリングされてしまう。 <button onClick={onClickClose}>閉じる</button> </div> )} </> ); });
関数をuseCallbackで囲むことによって、最近ある変数、または、関数が定義(変更含む)されたときの関数をずっと使い回すことができる。
参考
じゃけぇ (Takumi Okada)さんのUdemyの講義を参考にさせていただきました!
諸学者の私でもとてもわかりやすかったです!
⬇️【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門
Discussion