Pourquoi un simple composant React s'affiche-t-il deux fois ?

Question

Je viens de lancer un nouveau projet create-react-app et j'ai remarqué que react rend les composants deux fois ! Ma version de react dans paquet.json es "react": "^16.13.1"

import React, { useRef } from "react";

const App = () => {
  const renders = useRef(0);
  console.log("renders: ", renders.current++);

  return (
    <div>
      Hello
    </div>
  );
};

Cela produit au premier rendu :

renders: 0
renders: 0

Maintenant, si j'ajoute un bouton pour incrémenter l'état, chaque changement d'état produit également deux rendus supplémentaires :

import React, { useRef } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const renders = useRef(0);
  console.log("renders: ", renders.current++);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>increment</button>
      <div>count: {count}</div>
    </div>
  );
};

Cela se traduira par :

//--- initial render
renders: 0
renders: 0
//--- first click
renders: 1
renders: 2
//--- second click
renders: 3
renders: 4
//--- third click
renders: 5
renders: 6

Est-ce normal ou s'agit-il d'un bug dans la dernière version de react ?