Reactの実行時、2回renderされている理由が知りたい

Question

前提・実現したいこと・疑問

①なぜ2回renderされてしまうのかの理由が知りたい
②1回のrenderで済ませることは可能でしょうか？（それで動作を軽くなる？）
③renderされる数はそこまで気にする必要はないでしょうか？

以下の仮設の項目の参考記事（海外記事）を参照したのですが、知識量が足りないのか、理解に苦しんでいます。

発生している問題

■初期ロード時
console.logでrender数を確認すると、2回renderされてしまっている。

■countボタンを押すたび
2回renderされている。

該当のソースコード

import React from 'react';
import {Component} from 'react';


const App = () => (<Counter></Counter>)

class Counter extends Component {
  constructor(props){
    super(props)
    this.state = {count: 0}
  }

// プラスボタン
  handlePlusButton =() => {
     this.setState( { count: this.state.count+1});
  }

// マイナスボタン
  handleMinusButton = ()=> {
     this.setState( { count: this.state.count-1});
  }

  render(){
    console.log("render");
  return( 
  <div className="container">
    <div>count: {this.state.count}</div>

    <button onClick={this.handlePlusButton}>+1</button>
    <button onClick={this.handleMinusButton}>-1</button>
  </div>
    )
  }
}
export default App;

試したこと、及び仮説

下記のように仮設をたてました↓
index.jsのReact.StrictModeがrenderしているためかも？？？
参考記事 （海外記事です）↓
2回レンダリングされたReact Components —これを修正する方法はありますか？

補足情報（FW/ツールのバージョンなど）

参考にした補足記事
レンダリング段階のライフサイクルで予期しない副作用を検出する？
↓
One of the benefits that we get from React.StrictMode usage, is that it helps us to detect unexpected side effects in the render-phase lifecycles.

これが答えなような気がしてきました・・・・要はReactを使用を安全にするためでしょうか？

Answer 1

③renderされる数はそこまで気にする必要はないでしょうか？

はい、renderで副作用を起こすべきではない、つまり「renderの回数が正しくないと動かないようなコードを書くほうが間違い」です。

Comments

[pontarou3]

maisumakun 様
なんと！
秒でご回答いただきありがとうございます。

現段階で、正しく動作してれば問題なく、心配しなさんなっということですかね。

>This behaviour definitely has some performance impact, but we should not worry since it takes place only in development and not in production

参考記事にも開発段階で2回renderしますが、心配しなさんなっと書かれてました。
このまま開発すすめていきます、ありがとうございました！