ReactのFunction Componentでconsole.log

ReactのFunction Component内でconsole.logを使う方法。

開発やデバック時に便利です。

Function Component

ReactでFunction Componentを利用するとPureComponentよりパフォーマンスが上がるようなので、積極的に利用したいですが。

const Default = ( props ) => (
  <div>TEST</div>
);

このようなFunction Componentでpropsの値を確認したい時があります。

console.log()でエラー

下記のように普通にconsole.logを入れてもエラーになります。

const Default = ( props ) => (
  console.log(props);
  <div>TEST</div>
);

propsに渡した値を確認したいときなど不便です。

class形式(PureComponent)にすればrender()の前にconsole.log()が使えますが、それはFunction Componentではありません。

PureComponentで開発して後でFunction Componentにする方法もありますが、修正するのが面倒です。

Function Componentのままでconsole.log()が使いたいです、負けたくないです。

エラーにならない書き方

const Default = ( props ) => console.log(props) || (
  <div>TEST</div>
);

このようにconsole.log()を書くとエラーにならずにpropsを確認することができます。

開発時やデバック時に活用してください。