最終更新:2022-12-16 (金) 05:12:06 (174d)  

useState
Top / useState

const [state変数, state更新関数] = useState(state初期値);

https://ja.reactjs.org/docs/hooks-state.html

概要

↑

メモ

↑

ジェネリックで型も指定可能 

  • useState<User[]>([])
↑

state変数

  • state は以降の再レンダーの間も React によって保持されます
  • 次回以降のレンダー時には、useState からは既存の state の現在値を受け取ります。
↑

state更新関数

  • 新しい state が前の state に基づいて計算される場合は、setState に関数を渡すことができます。
  • この関数は前回の state の値を受け取り、更新された値を返します
  • 更新直前の引数の受け取り方 
    更新関数((prev) => prev + 1)
↑

関連

↑

値が更新されない

  • 理由:"state更新関数"を呼び出しても値が更新されるのはその呼び元の関数全体の処理が終わった後
  • 対策:
    • 新しい値を変数で保持する
    • 更新関数に関数を使う
  • https://zenn.dev/syu/articles/3c4aa813b57b8c
↑

React/クラスコンポーネントの場合

↑

this.setStateとの違い

  • クラスコンポーネントにおける this.setState と似ているが、新しい state が古いものとマージされないという違いがある
↑

関連




検索：