最終更新:2022-12-16 (金) 05:12:06 (174d)
useState
Top / useState
const [state変数, state更新関数] = useState(state初期値);
https://ja.reactjs.org/docs/hooks-state.html
概要
- React/ステートなどのReactの機能を、クラスを書かずに使えるようになります。
- React 16.8で追加された新機能
メモ
ジェネリックで型も指定可能
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 が古いものとマージされないという違いがある