useState

const [state, setState] = useState(initialState)

• リファレンス
  • useState(initialState)
  • setSomething(nextState) のように利用する set 関数
• 使用法
  • state をコンポーネントに追加する
  • 直前の state に応じて更新する
  • オブジェクトや配列の state を更新する
  • 初期 state が再生成されることを防ぐ
  • key を利用して state をリセットする
  • 直前のレンダーの情報を保存する
• トラブルシューティング
  • state を更新したのに古い値がログに表示される
  • state を更新したのに画面が更新されない
  • “Too many re-renders” というエラーが出る
  • 初期化関数や更新用関数が 2 度呼ばれる
  • 関数を state にセットしようとすると、その関数が呼び出されてしまう

リファレンス

useState(initialState)

コンポーネントのトップレベルで useState を呼び出して、 state 変数 を宣言します。

import { useState } from 'react';





    

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());
  // ...

state 変数は慣習として、 分割代入 を利用して [something, setSomething] のように命名します。

さらに例を見る

useState は以下の 2 つの値を持つ配列を返します。

setSomething(nextState) のように利用する set 関数

useState が返す set 関数を利用して、state を別の値に更新し、再レンダーをトリガすることができます。直接次の state を渡すか、前の state から次の state を導出する関数を渡します。

const [name, setName] = useState('Edward');

function handleClick() {
  setName('Taylor');
  setAge(a => a + 1);





    
  // ...

set 関数は返り値を持ちません。

set 関数は 次の レンダーのための state 変数のみを更新 します。 set 関数を呼び出した後に state 変数を読み取っても、呼び出し前の画面に表示されていた 古い値が返されます 。

新しい値が現在の state と同一の場合、React は最適化のために、 コンポーネントとその子コンポーネントの再レンダーをスキップ します。state の同一性の比較は、 Object.is によって行われます。一部のケースでは、React は子コンポーネントをスキップする前にコンポーネントを呼び出す必要がありますが、あなたのコードに影響を与えることはないはずです。

React は state の更新をまとめて行います（バッチ処理） 。 すべてのイベントハンドラを実行し終え 、 set 関数が呼び出された後に、画面を更新します。これにより、1 つのイベント中に複数回の再レンダーが発生することはありません。まれに、早期に画面を更新する必要がある場合（例えば DOM にアクセスする場合など）がありますが、その場合は flushSync を利用できます。

レンダー中に set 関数を呼び出すことは、 現在レンダー中の コンポーネント内からのみ許されています。その場合、React はその出力を破棄し、新しい state で再レンダーを試みます。このパターンが必要になることはほとんどありませんが、 前回のレンダーからの情報を保存 するために使用できます。 例を見る

Strict Mode では、 純粋でない関数を見つけやすくするために 更新用関数が 2 回呼び出されます 。これは開発時のみの振る舞いであり、本番には影響しません。更新用関数が純粋であれば（そうであるべきです）、2 回呼び出されてもコードに影響はありません。2 回の呼び出しのうち 1 回の呼び出し結果は無視されます。

state をコンポーネントに追加する

コンポーネントのトップレベルで useState を呼び出し、1 つ以上の state 変数 を宣言します。

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(42);
  const [name, setName] = useState('Taylor');
  // ...

state 変数は慣習として、 分割代入 を利用して [something, setSomething] のように命名します。

useState は、以下の 2 つの値を持つ配列を返します。

スクリーン上の表示を更新するには、次の state を引数として set 関数を呼び出します。

function handleClick() {
  setName('Robin');
}

React は次の state を保存したあと、新しい値でコンポーネントを再レンダーし、UI を更新します。

function handleClick() {





    
  setName('Robin');
  console.log(name); // Still "Taylor"!
}