📑

Reactの意図していない再レンダリングの解決策

2024/09/20に公開

どんなときに再レンダリングが起きるのか

  1. stateが更新されたコンポーネントは再レンダリング
  2. propsが変更されたコンポーネントは再レンダリング
  3. 再レンダリングされたコンポーネント配下の子要素は再レンダリング

親コンポーネントが再レンダリングされた時の子コンポーネント再レンダリング防止法(コンポーネントの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)

    関数をuseCallbackで囲むことによって、最近ある変数、または、関数が定義(変更含む)されたときの関数をずっと使い回すことができる。

参考

じゃけぇ (Takumi Okada)さんのUdemyの講義を参考にさせていただきました!
諸学者の私でもとてもわかりやすかったです!
⬇️【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門
https://www.udemy.com/course/modern_javascipt_react_beginner/?couponCode=KEEPLEARNING

Discussion