PureComponent にインラインのアロー関数を渡してもいい場合

前提知識

• [React] Component と PureComponentの違い - Qiita
• 【React】 PureComponent にアロー関数を渡してはいけない - 藤 遥のブログ

本題

PureComponent にインラインのアロー関数を渡してもいい場合がある。これだ。

class MyContainerComponent extends Component {

  render() {
    return <MyPureComponent ref={(ref) => (this.myPureElement = ref)} />
  }
}

こんな例，至るところで見るのでずっと疑問だったけど，冷静に考えてみて今日気づいた。

ref は prop じゃない。

どうやらこいつ， key に並ぶ特殊属性らしい。

• Warning: ref is not a prop · Issue #2181 · JedWatson/react-select
• Warning: Element: key is not a prop · Issue #518 · facebook/react-devtools

つまり props オブジェクトの中に入らなければ shallowEquals の比較に何も影響は出ないので，堂々とアロー関数書いちゃってOKなのである。

今までこんな無駄なコードを書いていた・・・↓

class MyContainerComponent extends Component {

  assignMyPureElement = (ref) => (this.myPureElement = ref)

  render() {
    return <MyPureComponent ref={this.assignMyPureElement} />
  }
}