Olá VergilSparda, blz?

O primeiro código de exemplo tbm é um exemplo válido. Como foi mecionado na citação a abaixo o console mudando exatamente como esperado. Porém, o talvez o comportamento esperado para tela, que ao clicar em + ou - menos diminuar o valor E modifique na tela, não esteja correto.

A resposta é não, o código não vai funcionar. Mas se você rodar o código e ver o console, você vai perceber que a variável counter está mudando exatamente como esperado.

useState é um React Hook que permite adicionar uma variável de estado ao seu componente.

A convenção é nomear variáveis​de estado como [algo, setAlgo] usando desestruturação de array.

No caso do exemplo foi usado um contador, para atualizar o valor em tela

const [counter, setCounter] = useState(0);

Dessa forma mencionado, quando é o usado setAlgo que é disponibilizado do Hook do React o componente faz uma atulização da tela dessa forma mostrado o novo valor em atual memória.

O state vai engatilhar a re-renderização e controlar o ciclo de vida do componente, a tal mudança de estado, comentado no item anterior (dá uma olhada no gif do item 1).

Diferente do primeiro exemplo onde o valor que aperece em tela é sempre o valor mostrado da primeira renderição do componetente. Depois que é feita operção counter = counter + 1; o valor tbm é modificando em memória, tanto que aprece correto no console.log, contudo não exite nova renderização de tela para mostra o novo valor.

Espero ter ajudo