useState does not update

Question

I have a function that fetches user information in an API and stores it in a useState, would like to know if I put a console.log to see if stored the data correctly in useState returns me empty but on the screen shows me the values only from the second request is shown the information in the console, I will post the code here:

export default function Teste() {

  const [repositories, setRepositories] = useState({});
  const [nome, setNome] = useState()

  const handleChange = (event) => {
    const auxValues = { ...nome }
    auxValues[event.target.name] = event.target.value
    setNome(auxValues)
  }

  function buscarUser(cpf){
    fetch(`http://localhost:8080/rest/v1/user/${cpf}`)
      .then(res => res.json())
      .then(data => setRepositories(data));
  }

  function handleUser(){
    buscarUser(nome.usuario)
    console.log(repositories)
  }

  return(
    <>
      <input name="usuario" onChange={handleChange}></input>
      <button onClick={ handleUser }>Buscar User</button>
      <label> {repositories.nome} </label>
    </>
  ) 
} ``` 

Answer 1

I recommend taking a look at promises and also a little about programação assíncrona in the Javascript, explaining in a general way, what is happening there is that in its function handleUser, you are running a buscarUser in which is a promise and it is not being expected the end of its execution to carry out the console.log, a simple way to solve this would be to simply put:

function handleUser(){
    buscarUser(nome.usuario)
     .then(() => console.log(repositories))
 }

Thus the console.log will only be executed when the request ends and is successful. I hope you helped ! Hugs !