本記事は「フロントエンドの開発効率を向上するヒントを教え合おう！」イベントの参加記事です。
今回は、↓の記事で再レンダリングを確認するときにReact Developer Toolsを使ったのでその紹介と、バグにハマったのでその回避方法を紹介しますー
React Developer Toolsのインストール
Chromeを使ってる場合はこちらから
一応Firefoxはこちらですが、自分は使ってません。すみませんー
以下説明はChromeで行っていきます。
設定
ChromeのDevToolsを開くとメニューの最後の方にComponentsとProfilerが表示されるのでどちらかを開きます。
そうするとReact Developer Toolsが表示されるのですが、ヘッダ部分にオプションボタンがあるのでそれを開きます。（画像の赤枠部分）
オプションが表示されたら、Generalタブを開いて、その中にある「Highlight updates when components render.」にチェックを入れます。（赤枠部分）
これでレンダリング要素がハイライトされるようになります。
実際に使ってみる
上の記事でハイライトされるのを確認しようとしましたが、最初は下記のようにしていました。
const Child = () => {
return <div>child</div>;
};
const Parent = () => {
const [_count, setCount] = useState(0);
const onChange = useCallback(() => {
setCount((prev) => prev + 1);
}, [setCount]);
return (
<>
<input onChange={onChange} />
<Child />
</>
);
};
inputで入力をするとChildコンポーネントが再レンダリングされてハイライトされました。
ここまではよかったのですが、次にChildコンポーネントをmemo化して再レンダリングされないのを確かめようとしました。
const Child = memo(() => {
return <div>child</div>;
});
const Parent = () => {
const [_count, setCount] = useState(0);
const onChange = useCallback(() => {
setCount((prev) => prev + 1);
}, [setCount]);
return (
<>
<input onChange={onChange} />
<Child />
</>
);
};
これでinputで入力すると、Childコンポーネントは再レンダリングのハイライトをされないはず、と思っていたらハイライトされてしまいました。
？
なんか書き方まずいのかとかやり方間違ってるのかとか、そもそも想定が間違っててmemo化しても再レンダリングされるのかとか色々考えたり試したりしましたが、console.logとかで確認してみるとどうもChildコンポーネントのレンダリングはされてなさそうでした。
これはReact Developer Toolsの使い方が間違ってるのかと思って調べていたらGitHubの方にIssueがありました。
こちらのコメントによると、React.Fragmentを使うとこのように実際にレンダリングされていなくてもハイライトされるということでした。
というわけで、コードを下記のようにReact.Fragmentからdivに変更してみるとハイライトされなくなりました。
const Parent = () => {
... 省略
return (
<div>
<input onChange={onChange} />
<Child />
</div>
);
};
Issueの対応はされていないようなので、React.Fragmentを使っている箇所ではレンダリングの確認をする時は気をつけたほうがよさそうですね。