React hooks useState setValue still rerender one more time when value is equal

I have sample code below:

function App() {
  console.log("render");
  const [val, setVal] = React.useState(0);
  return (
    <div className="App">
      <h1>{val}</h1>
      <button onClick={() => setVal(12)}>Update with same value</button>
    </div>
  );
}

When I click a button multiple times, the console log 3 times with 'render' message. For me, it should be 2 times only:

• 1 for first render

• 2 for the update from val 0 to 12 (when click button)

and since this time, it should not re-render because the same value (12) is updated to val.

But why it appears 3 times? That mean it still re-render one more time despite the same value was updated.

Anyone who know please explain this, thanks in advance.

P/S: I've figured out that it's only cause an extra re-render when the value changed then has been updated with the same

function App() {
  console.log("render");
  const [val, setVal] = useState(4);
  return (
    <div className="App">
      <h1>{val}</h1>
      <button onClick={() => {
        setVal(val => val + 1)
      }}>Update</button>
      <button onClick={() => {
        setVal(val => val)
      }}>Update with same value</button>
    </div>
  );
}

When first click on 2nd button, no re-render call, but if you click the 1st button then 2nd button, 2nd button cause 1 extra re-render