Как один конкретный порядок установки реагирующих хуков работает, а другой нет

Question

Я делаю простую страницу входа, где блоги возвращаются в зависимости от того, кто вошел в систему. Когда я настраивал приложение реакции, я устанавливал обработчик входа таким образом. Обратите внимание на порядок установленных состояний.

const handleLogin = async (event) =>{
  event.preventDefault()
  try {
    const user = await loginService.login({
      username,
      password
    })
    const userData = await userService.getAll()
    const userBlogs = userData
      .find(u => u.username === user.username)
      .blogs

    setUser(user)
    setUserBlogs(userBlogs)
    setUsername('')
    setPassword('')
  } catch (exception) {
    console.log('Error: ', exception)
  }
}

Это выдает мне ошибку:

TypeError: "t is null"

Тогда когдая переключил порядок setUser (..) и setUserBlogs (..) примерно так ...

const handleLogin = async (event) =>{
  event.preventDefault()
  try {
    const user = await loginService.login({
      username,
      password
    })
    const userData = await userService.getAll()
    const userBlogs = userData
      .find(u => u.username === user.username)
      .blogs

    setUserBlogs(userBlogs)
    setUser(user)
    setUsername('')
    setPassword('')
  } catch (exception) {
    console.log('Error: ', exception)
  }
}

Это сработало.

Почему это работает в этом порядке, а не в другом