Как мы можем получить значение состояния сразу после изменения состояния?

Вы используете useEffect, чтобы что-то делать при изменении состояния.

export default function FeedbackForm() {
  const [name, setName] = useState('');

  useEffect(() => {
    alert(name);
  },[name]) // <- this is the dependency, useEffect is called whenever name changes.

 async function handleClick() {
    setName(prompt('What is your name?'));
//    await alert(`Hello, ${name}!`);
  }

  return (
    <button onClick = {handleClick}>
      Greet
    </button>
  );
}```

Я бы предложил вам один простой способ — использовать константу

например ->

import { useState } from 'react';

export default function FeedbackForm() {
  const [name, setName] = useState('');

 async function handleClick() {
    const newName = prompt('What is your name?');
    setName(newName);
    await alert(`Hello, ${newName}!`);
  }

  return (
    <button onClick = {handleClick}>
      Greet
    </button>
  );
}

Таким образом, вы сможете использовать обновленное значение состояния. Надеюсь, это решит вариант использования вашего кода.

Вы не можете получить значение сразу, так как функция была создана, когда значение name было ''. Как только обработчик событий завершит выполнение, React повторно отрисует компонент, который теперь будет иметь обновленное значение name.

Вы можете сохранить возвращаемое значение из приглашения в локальной переменной, а затем использовать его вместо этого:

function handleClick() {
  const enteredName = prompt('What is your name?');
  setName(enteredName)
  alert(`Hello, ${enteredName}!`);
}

Также обратите внимание, что я не установил функцию handleClick как async. alert не возвращает Promise, поэтому использование await перед ним не имеет никакого эффекта.

есть ли способ сделать это, чтобы я мог получить значение в оповещении

Предупреждение, запускаемое в вашем обработчике, основано на вашем приглашении. Хотя это значение не является состоянием, вы можете сохранить ответ из приглашения и сразу же использовать его в своем обработчике, если захотите.

Если вы установите состояние в своем обработчике, это приведет к повторному рендерингу компонента. Когда компонент повторно визуализируется, вы можете просто прочитать (теперь обновленное) значение как текущее состояние.

Однако, если вам не нужно значение при каждом рендеринге, а оно нужно только при изменении name, вы можете использовать useEffect хук.

Пример

export default function FeedbackForm() {
  const [name, setName] = useState(null);

  console.info(`component rendered, current name is ${name}`);

  useEffect(() => {
    console.info("effect running...");
    if (name === null) {
      return;
    }
    console.info(`name has changed to ${name}`);
    alert(`Hello, ${name}!`);
  }, [name]);

  function handleClick() {
    const newName = prompt("what is your name?");
    setName(newName);
  }

  return (
    <div>
      <button onClick = {handleClick}>Greet</button>
      <p>Name: {name}</p>
    </div>
  );
}

https://codesandbox.io/s/react-name-prompt-6qknz6