【React】デバッグするためのTips

デバッグをうまくできるかどうかで開発速度が大きく変わります。
ReactでデバッグするためのTipsをまとめました。

console出力

jsx内にconsoleを仕込む

console.log()はvoidを返します。
OR演算子でつないであげればJSX内にconsoleを仕込むことができます。

const Component = (
  <>
    {console.log("hoge") || (<Hoge />)}
  </>
);

いろんなconsoleを使う

console.log以外にも便利なコンソール出力があります。

例えば、console.tableは配列をオブジェクトをテーブル形式で見やすくしてくれます。

console.table({ a: ["A1", "A2"], b: ["B1", "B2"] });

他にも色々あるので使ってみてください。
参考↓
https://developer.mozilla.org/ja/docs/Web/API/console
https://qiita.com/kashira2339/items/874f95aaaa59f4a17d3d

Errorを使って出力する

Errorを使ってconsole出力すると、どの関数から呼ばれたログなのかが分かります。

function hoge() {
  console.log(
    new Error("test")
  )
}

function main(){
  hoge()
}

main()

Error: test
    at hoge (https://nc8tc.csb.app/src/index.js:4:15)

    at main (https://nc8tc.csb.app/src/index.js:8:3)

    at $csb$eval (https://nc8tc.csb.app/src/index.js:11:1)

    at H (https://codesandbox.io/static/js/sandbox.8f9f4000c.js:1:99995)

    ...

エラーコードの上部を確認するとhogeとmainが呼ばれたことが分かります。

react-dev-tools

react-dev-toolsはreactのためのデバックツールです。
Reactのコンポーネントのためのインスペクタが使えたり、レンダリングをプロファイルしてコンポーネント毎のレンダリング時間を表示できたりします。

インスペクタ機能↓

プロファイル機能↓

chromeの拡張機能が用意されています。
リンクからダウンロードするだけで使えるようになります。
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja

redux-dev-tools

redux-dev-toolsはredux内にどのような値が入っているのかを簡単に確認できるツールです。

使用するにはcreateStoreの第二引数を設定する必要があります。

  const store = createStore(
     reducer,
     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );

react-dev-toolsと同様、chromeの拡張機能が用意されています。
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja

why-did-you-render

why-did-you-renderは無駄なレンダリングがあれば、console出力で教えてくれるライブラリです。

こちらのsandboxが分かりやすかったので触ってみてください。
https://codesandbox.io/s/pyi14