React useState useEffectについて

開発中関数の挙動理解が不十分のため機能実装に時間を要したため投稿します。

useStateについて

useStateとは 状態を管理する関数。Stateの状態が変化した際に再レンダリングされる。（再レンダリング条件は他にもあります。）
値が変わってすぐに再レンダリングするわけではない。
どのタイミングで行っているのかは確認することができないと思われます。

useEffectについて

useEffectとは コンポーネントの「状態」や「タイミング」に応じて動く処理を設定するもの。

ということで以下のとおり記述して値の変化を確認することで再レンダリングするタイミングは確認できないこと。値変化後すぐに再レンダリングしないことを確認することができました。
👆2024.12.11 honey32様のご教から取り消しました。

.jsx

const [a, b] = userState("c");
// aは現在の値　bは値を更新する関数　cは初期値。

// eventの中身や入力前、入力後の値を確認したい。
const inputChange = (event) => {
  console.log("event:", event); // event情報が確認できる
  console.log("入力前のaの値:", a); // 入力前なので空
  console.log("event.target.valueの中身:", event.target.value); // valueの内容が確認できる
  console.log("入力後のa-1:", a); // ここでは値まだ更新されていない！👈 値が変わらないのは再レンダリングの有無のためではなく、公式ドキュメントに記載あるようにaの値を保持するため（2024.12.11記述追加したもの）
  b(event.target.value); // 更新関数へ入力された値を渡す
  console.log("入力後のa-2:", a); //ここでもまだ値は更新されていない！
  // よって、すぐに再レンダリングされるわけではない 👈 値が変わらないのは再レンダリングの有無のためではなく、公式ドキュメントに記載あるようにaの値を保持するため。（2024.12.11記述追加したもの）

useEffect(() => {
  console.log("入力後のa-3:", a); // ここでは更新されたaの値を確認できる
  }, [a] // aの値に変化があった時にuseEffectが動くように配列で設定する
  );

    
<input placeholder="入力してください" value={a} onChange={inputChange} />
// aの値をvalueへ渡している onChange:値が変更された際にinputChangeが発火
// eventはHTML要素のイベント（クリック、入力変更など）が発生したときに、ブラウザが自動的に生成する 「イベントオブジェクト」 でReactでも、このイベントオブジェクトが自動的に渡される。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼