React stateの更新がズレる件について

質問をする上での前提

Reactで実装しています。
textareaに入力されたら入力内容にstateを更新するということをしています。

発生している問題

console.logでstateの値を出力すると、前回の(一つ前に操作したものが出力される)
例 1→2→3→4→5　という順番でtextareaに入力していく。
出力結果 []→1→12→123→1234→12345
望む出力結果 1→12→123→1234→12345

補足

有識者の方はご存知かと思いますが、useStateの初期値を配列にしているからこの問題が発生しているわけではなさそうです。
調べていたところ、stateの更新は非同期で行われるためリアルタイムで更新されるわけではないとのことでしたが、同じような実装している方は同様の問題に直面している様子がなく質問させていただきます。

該当のソースコード

import React, {useState} from 'react'
import { Input } from './components/input';

const App = () => {
  const [textareaA, setTextAreaA] = useState([]);
  
  const onChangeTextArea = (e) => setTextAreaA([e.target.value])

  return (
    <Input text="textarea" onChange={() => onChangeTextArea} />
  );
}

export default App;

===============================================================================

Input.jsx

export const Input = (props) => {
  const { text, onChange } = props

  return (
    <>
      <label>{text}</label>
      <textarea cols="50" rows="20" onChange={onChange()} />
    </>
  )
}

初歩的なことで恐れ入ります。
有識者の方いらっしゃいましたら、ご教授いただけないでしょうか？

よろしくお願いいたします。

hoshi-takanori

2021/10/03 07:36

setTextAreaA の直後に console.log(textareaA) したってことですよね。textareaA の値が更新されるのは次にその関数コンポーネントが呼ばれた時です。

退会済みユーザー

2021/10/03 07:56

どこに console.logを入れたのか質問に書いとらんので何とも言えんのやけど、 textareaA を useStateしている行 const [textareaA, setTextAreaA] = useState([]);　の直後で console.log(textareaA); を入れたんやったら、このconsole.log からの出力は [] で始まっても不思議じゃあらへん。それと、質問の本題とはちゃうけど、 onChange={() => onChangeTextArea} とか onChange={onChange()} とか、このままじゃ動かんやろ？と思える点がちらほらあるのも気になってますぅ。

TK.....hasi

2021/10/03 13:33

hoshi-takanori様ご回答ありがとうございます。そうなんですね。次に関数コンポーネントが呼ばれたときでなく即時更新する方法があれば実現できそうです。 suwmn50799様失礼いたしました。 console.logを入れた箇所は、setTextAreaA の直後に console.log(textareaA)をしました。 >このままじゃ動かんやろ？と思える点がちらほらあるのも気になってますぅ私の環境だと問題なく動作しているようです。なぜ動作しないように思えたのでしょうか？

hoshi-takanori

2021/10/03 16:54

即時更新する方法はないというか、set〜を呼べばすぐにそのコンポーネントは更新されるので、それで問題ないはずというか…。そもそも何がしたいのでしょうか？あと、 onChange={() => onChangeTextArea} と onChange={onChange()} が組み合わさった結果、動くことは動くのですが、自分も最初は「このままじゃ動かんやろ？」と思いました。紛らわしい書き方だと思います。

退会済みユーザー

2021/10/04 11:25

TK.....hasiさん > なぜ動作しないように思えたのでしょうか？ onChange={() => onChangeTextArea} と onChange={onChange()} を、それぞれ個別に見たときに、お目にかからないコードだったためです。 hoshi-takanoriさんが > 組み合わさった結果、動くことは動くとおっしゃっている点は確認できました。