React (TypeScript): ベストプラクティス

React Best Practices

2017末時点での React Component 設計のベストプラクティスを元に、
私の前の勤務先の開発チームで共有していたベストプラクティスの一覧です。改善案や他のベストプラクティスなどのフィードバックを頂けると幸いです。

1. Prettierを利用する。

npx prettier --write ＜ファイル＞

2. React.createClass() を使わない

Reactのv16からcore packageから削除されました。

3. componentWillXXX()を利用しない

Reactのv17でdeprecateされるので以下のlifecycleメソッドの利用を避けてください。

• componentWillMount()
• componentWillReceiveProps()
• componentWillUpdate()

Legacy Lifecycle Methods

4. AJAXの呼び出しはcomponentDidMount() で行う

Axiosやwindow.fetch等でのAJAXの呼び出しはcomponentDidMount()で行なってください。
AJAX and APIs

5. 可能な限り、React.FC (Functional Component)を使う

ES6クラスやReact.createClassよりも[およそ45%パフォーマンスが良い。
45% Faster React Functional Components, Now

6. Class Componentを利用する際にはReact.PureComponentsを使う

propsが変わった場合のみ再レンダリングされるようになる。

7. 可能な限りクラスは継承しない

継承はせずに、propsに違う値を渡す。

8. 内部関数で子Componentをrenderしない

別Componentに切り出しましょう。

9. Propsに何も渡してないFunctional ComponentはReact.memoでラップしない。

Shallow Equalが実行される分だけ、React.FCよりも遅くなります。
本当は怖いReact.memo

10. テンプレート文字列を利用する。

可読性を上げるために、可能な限りテンプレート文字列を利用してください。

ES6以前の書き方

const url = '/api/' + this.state.uri

推奨される書き方

const url = `/api/${this.state.uri}`

11. ES6 分割代入を利用する

JSXの可読性を上げるために、render()の中のpropsとstateは分割代入してください。Functional Componentの場合は、propsのみ分割代入してください。

Class Component

public render() {
    const { header, body } = this.props
    const { value } = this.state
    return (
        <div>
           <h1>{header}</h1>
           <p>{body}</p>
           <input type="text" value={value} />
        </div>
    )
}

Functional Component

export default SampleComponent: React.FC = props => {
    const { header, body, value } = props
    return (
        <div>
           <h1>{header}</h1>
           <p>{body}</p>
           <input type="text" value={value} />
        </div>
    )
 }