renderSomething() メソッドを潰す

React JavaScript

年末だし大掃除しよう、
ということでClass Componentにある render* というメソッドを潰している。

stateless functionへの書き換え

具体的には、こんな感じになっているのを

class Foo extends React.Component {
  renderSomething() {
    return <div>something</div>
  }

  render() {
    return <div>{this.renderSomething()}</div>
  }
}

こうしたい

const Something = () => <div>something</div>
const Foo = () => (
  <div>
    <Something />
  </div>
)

eslintにruleを追加する

都度search and destroyするのは効率が悪いので
eslintのruleを追加して引っかけることにした。

.eslintrc に以下の設定を追加。

rules:
  no-restricted-syntax:
    - warn
    - selector: "MethodDefinition[key.name=/^render.+/]"
      message: "Don't use render* method"

プロジェクトでは error でCIをコケさせてマージを禁止しており、 本件はMUSTではないため warn にとどめている。