• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

React/フック

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)

• setState 関数は state を更新するために使用します。新しい state の値を受け取り、コンポーネントの再レンダーをスケジューリングします。

オブジェクトの保持

• state 変数はオブジェクトや配列も何ら問題なく保持できますので、関連する値をいっしょにまとめておくこともできます。
• しかしクラスでの this.setStateとは異なり、state 変数の更新は、マージではなく必ず古い値を置換します。
• https://ja.legacy.reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables
• 更新したいフィールドを古い state に手動でマージしないといけない

  setState(state => ({ ...state, left: e.pageX, top: e.pageY }));

• 以前のstate(prev)を取得→スプレッド構文で新しい値とマージ

参考

• https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object

関連

• React/state

値が更新されない

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

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

• this.setState

this.setStateとの違い

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

関連

• setState