setState로 변경할 때 질문드립니다.

안녕하세요 코딩애플님
setState를 두 번 작동시킬 때 리렌더링 되는 이유를 모르겠어서 질문드립니다.

function App() {
  let [a, setA] = useState(1)
  console.log('렌더링')

  return (
    <div className="App">
      <header className="App-header">
        <div
          onClick={() => {
            console.log(a)
            setA(2)
          }}>
          {a}
        </div>
      </header>
    </div>
  )
}

1. {a}를 클릭하면 SetA(2)가 {a}를 2로 변경하도록 코드를 작성하였습니다.
2. 그리고 App이 렌더링 될 때  console.log('렌더링')이 출력되도록 코드를 작성하였습니다.

처음 {a}를 클릭하면 State가 변경되었을 때 리렌더링이 되기 때문에 렌더링이 콘솔에 출력되는 것이 이해가 됩니다.
그러나 두번째로 클릭하였을 때는 이미 a는 2이고, State가 변경되는 것이 아님에도 렌더링이 출력되는 것이 이해가 되지 않습니다.
세번째부터는 더이상 렌더링이 되지 않고 onClick이벤트만 작동합니다.
State가 변경될때 App이 리렌더링 되는것으로 이해하고있었는데 왜 두번째 까지 리렌더링이 발생하는지 궁금해서 질문 드립니다!