React component　パフォーマンスの最適化(二)：不要な再レンダーを避けるように

親コンポーネントが更新された場合は、子コンポーネントはそれに伴って更新されるようになります。それは reactコンポーネントの更新機能です。

そのような考えははっきりしていますが、子コンポーネントが何も変わらなくても再レンダーを起こす場合があります。

どうやって不要な再レンダーを避けますか。

フックメソッドの shouldComponentUpdate(nextProps,nextState)を使うのはお勧めです。

class Hello extends Componennt {
    shouldComponentUpdate(nextProps,nextState){
        //条件により、再レンダーかどうか決めます
        return false
    }
    render() {...}
}

shouldComponentUpdate()メソッドには二つの引数があります。nextPropsは最新のpropsで、nextStateは最新のstateです。

他には、メソッドのブロック内では「this.state」プロパティを使って、更新した前のステートを取得できます。
「this.state」と「nextState」を比較するのを通じて、当コンポーネントがアップデートするかどうか判断できます。
下記のコードをご参照ください。

class Hello extends Componennt {
    shouldComponentUpdate(nextProps,nextState){
        if(nextState === this.state){
            //　stateは変わらない、更新必要がない
            return false
        } else {
            //　stateは変わった。更新必要がある
            return true
        }  
    }
    render() {...}
}