ReactコンポーネントはJSXとして呼ぶべき

問題が発生する例#

次のアプリは、ReactNode を返す Hoge コンポーネントと、それを renderHoge という名前の変数に代入しただけの関数に、全く同じ配列の要素をそれぞれに渡して呼ぶ。Shuffle を押すと配列の中身が入れ替わり、数字が入れ替わることを期待する。

https://react-ts-ncsxsw.stackblitz.io/

この例では、renderHoge の方だと再レンダリングがされなくなる。React Devtool の Components タブをよく見ると renderHoge はコンポーネントとして表示されておらず、hooks→eval の中に入っていることが分かる。

コンポーネントとして振る舞わなくなるため、このことを認識せずに利用すると様々なバグの原因になりうる。

対策#

JSX がトランスパイルされるということを意識せずにコードを書いている人はそこそこおり、次のように配列をマップするようなケースで書かれていることが多い。

1
const List = ({ data, renderItem }) => {
2
  return <ul>{data.map(renderItem)}</ul>;
3
};

次のように名前を変更して JSX として呼べば回避できる。

1
const List = ({ data, renderItem: RenderItem }) => {
2
  return (
3
    <ul>
4
      {data.map((item) => {
5
        return <RenderItem key={item.key} {...item} />;
6
      })}
7
    </ul>
8
  );
9
};