Como os estados do react funcionam

O React trata os estados como Closures, ou seja, cada estado tem um contexto. Por exemplo:

function Post() {
 const [likes, setLikes] = useState(0);

 const addLike = () => {
  setLikes(likes + 1)
  setLikes(likes + 1)
 }

 return(
  <>
   <button onClick={addLike}>
    Like
   </button>
  </>
 )
}

Se eu clicar no botão, o que você acha que vai ser o resultado? Os likes aumentarão de dois em dois, certo? Errado! Por baixo dos panos o React trata os componentes como funções, onde os valores dos estados são passados a eles. A cada alteração de estado, um re-render é causado, ou seja, reinvoca a função, ao reinvocar a função ela utiliza outro contexto.

function Post() {
 const [likes, setLikes] = useState(0);

 const addLike = () => {
  setLikes(likes + 1)
  setLikes(likes + 1)
 }

 return(
  <>
   <button onClick={addLike}>
    Like
   </button>
  </>
 )
}

Post(1);
Post(2);

Então, quando você passa outro setState, o seu estado de like ainda está no contexto anterior, por isso só irá de um em um e também, por esse mesmo motivo, caso você tente acessar o valor de um estado logo após altera-lo, você vai ter um valor “desatualizado”, pois, como dito anteriormente, você está acessando o estado daquele contexto de execução ao invés do novo (onde o estado está atualizado).

Para acessar o valor atualizado, você pode fazer de duas maneiras:

1 — Colocar o valor em uma variavel:

function Post() {
 const [likes, setLikes] = useState(0);

 const addLike = () => {
  let _likes = likes;

  _likes + 1;
  _likes + 1;
  setLikes(_likes)
 }

 return(
  <>
   <button onClick={addLike}>
    Like
   </button>
  </>
 )
}

2 — Acessar o valor mais recente do estado. Toda alteração de estados fica armazenada numa espécie de fila, permitindo assim que mesmo em um contexto, você consiga atualizar o estado do contexto mais atualizado:

function Post() {
 const [likes, setLikes] = useState(0);

 const addLike = () => {
  setLikes((state) => {
   return state + 1;
  })

  setLikes((state) => {
   return state + 1;
  })
 }

 return(
  <>
   <button onClick={addLike}>
    Like
   </button>
  </>
 )
}

Sempre que for atualizar uma informação que depende do valor que ela tinha anteriormente (isso falando de estados), utilize o jeito que foi mostrado na segunda maneira acima.