Как управлять асинхронной природой ловушки useState при установке значения и его использовании сразу после

Question

Я новичок в React и не могу понять, как правильно использовать ловушку useState.

export default function App() {
  const [name, setName] = useState("noname");

  const updateAndLogName = () => {
    setName("Alex");
    console.log(name); // first time => "noname"
  };

  return (
    <div className="App">
      <button onClick={() => updateAndLogName()}>
        Click me to change and log name in console
      </button>
    </div>
  );
}

CodeSandbox 1

Я вызываю метод который обновляет значение и использует обновленное значение непосредственно после. Но так как функция setName является асинхронной, я получаю исходное значение в console.log и должен ждать, пока React обновит значение, чтобы получить правильный результат.

В этом упрощенном примере я мог бы просто принять значение как аргумент функции и использовать его как в setName, так и console.log, и, может быть, так оно и должно быть, но есть ли другой предпочтительный способ справиться с этой ситуацией?

РЕДАКТИРОВАТЬ:

Вот еще один пример:

CodeSandbox 2

Answer 1

В этом упрощенном примере я мог бы просто взять значение в качестве аргумента функции и использовать его как в setName, так и console.log, и, возможно, именно так оно и должно быть

Это один из способов, если вы не хотите ждать другого рендера. Если ожидание рендера в порядке, другой способ может быть:

useEffect(()=>{
  console.log("Will get here anytime name changes", name);
}, [name])

Также related .