React（Nextjs）でフォーム実装でuseStateとuseCallbackを用いて入力された値を親コンポーネントで出力したい

next.jsで実装していましてinputとselectを子コンポーネントとして読み込みフォームを作成しています。

子コンポーネントの入力された値を親コンポーネントで受け取り、inputContentとinputStatusでそれぞれconsoleに出力しています。その際に実際に入力された文字とconsoleに出力した文字が以下のようにズレてしまいます。（表示されて欲しい値の1つ前の値）

入力された文字列	console出力された値
a
aa	a
aaa	aa
aaaa	aaa

設定されているevent.currentTarget.value（event.target.valueでも同様）を出力すると入力された文字同様の値がconsole出力されるので、入力値はちゃんと渡って来ていると思います。
この状態はコード上どこか間違っているのでしょうか？それともそいう挙動をするものなのでしょうか？

まだチュートリアル卒業レベルなので初歩的な質問かとは思うのですが気になって進めそうにないのでどなたか教えてもらえると嬉しいです。

以下が今書いてみているコードになります。
不足あれば追加しますのでコメントでご指摘いただければと思います。

どうぞよろしくお願いいたします。

親コンポーネント

import { useCallback, useState } from 'react';
import { SelectBox, TextField } from './forms';

const Filter = () => {
  const [text, setText] = useState('');
  const [status, setStatus] = useState('');

  const inputText = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      setText(event.currentTarget.value);
      console.log(text);
    },
    [text, setText],
  );

  const inputStatus = useCallback(
    (event: React.ChangeEvent<HTMLSelectElement>) => {
      setStatus(event.currentTarget.value);
      console.log(status);
    },
    [status, setStatus],
  );

  return (
    <>
      <div>
        <TextField
          label={'内容'}
          placeholder={'内容を入力'}
          type={'text'}
          onChange={inputText}
        />
      </div>
      <div>
        <SelectBox
          label="ステータス"
          value={status}
          select={inputStatus}
        />
      </div>
    </>
  );
};

子コンポーネント（TextFiled.tsx）

interface Props {
  label: string;
  placeholder: string;
  type: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const TextField = (props: Props) => {
  return (
    <>
      <label>{props.label}</label>
      <input
        type={props.type}
        placeholder={props.placeholder}
        onChange={(event) => props.onChange(event)}
      />
    </>
  );
};

子コンポーネント（selectBoxs.tsx）

interface Props {
  id?: string;
  label: string;
  select: (event: React.ChangeEvent<HTMLSelectElement>) => void;
  value: string;
}

const SelectBox = (props: Props) => {
  return (
    <>
      <label>{props.label}</label>
      <select
        value={props.value}
        onChange={(event) => props.select(event)}
      >
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </>
  );
};

行動規範の内容に同意します

回答2件

ベストアンサー

クラスコンポーネントで setState した場合や、 useState フックを利用し State を更新するときの更新処理は、非同期で行われます。

どういうことかというと、

js
1setText(event.currentTarget.value);
2console.log(text);

と書いたとき、すぐ Text に値がセットされ console.log が呼び出されるわけではないということです。

今回のケースでは、値のセットが後回しにされて、先走って console.log が呼び出された結果、１つ前の値が表示されたのではないかと考えられます。

単に現在の値を表示したいのであれば、 event.currentTarget.value を直接表示するか、

js
1import { useCallback, useState, useEffect } from 'react';
2
3/* ... */
4
5const inputText = useCallback(
6    (event: React.ChangeEvent<HTMLInputElement>) => {
7      setText(event.currentTarget.value);
8    },
9    [text, setText]
10);
11
12useEffect(() => {
13    console.log(text);
14}, [text]);