Как работает вход onChange в зависимости от состояния?

Question

Поэтому, когда я пытаюсь записать значение ввода при каждом событии onChange, это дает странную задержку в 1 событие, так как «некоторый текст» будет значением по умолчанию для ввода, скажем, когда я удаляю » t 'from' some text ', нажав на клавишу backspace / delete, сначала записывается' некоторый текст 'вместо' some tex ', а затем, когда срабатывает 2 onChange (нажатие клавиши), это время, когда я получаю ожидаемый журнал (см. фото ниже). Есть ли что-то, чего мне не хватает, возможно, пробел в моем понимании?

Итак, в основном происходит то, что когда вы нажимаете клавишу, сначала просто записывается любое значение по умолчанию, а затем вы получаете ожидаемый журнал после нажатия кнопки more. нажатие клавиши в режиме «1-событие-обратный вызов задерживается». странно, а? как бы я избавился от задержки? справка.

const TestComponent = () => {

  const [val, setVal] = React.useState('some text');
  const handleOnchange = React.useCallback((event: TypeEvent) => {
    setVal(event.target.value);
    console.log(val);
  }, [val]);

  return (
    <>
      <input type='text' value={val} onChange={handleOnchange} />
    </>
  );
}

Answer 1

Консоль Значение e.target.value, которое установлено в состояние,

внутри обработчика без useCallback будет в порядке.

const App = () => {
const [val, setVal] = React.useState('some text');
const handleOnchange = e => {
  console.log(e.target.value)
  setVal(e.target.value)
}
return (
  <div className="App">
    <input type='text' value={val} onChange={handleOnchange} />
  </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

---

Обновление: демо с useCallback

const App = () => {
const [val, setVal] = React.useState('some text');
const handleOnchange = React.useCallback(e => {
  console.log(e.target.value);
  setVal(e.target.value);
}, [val]);
return (
  <div className="App">
    <input type='text' value={val} onChange={handleOnchange} />
  </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>