useStateについて

const [count, setCount] = useState(0);

戻り値:

state変数とそのstate更新関数をタプルとして返す

タプル型について

＊JSにはタプル型はない。 そこで TypeScript では JavaScript の配列をタプルとして扱えるように設計されている。

let 変数名: [データ型, データ型] = [値, 値];

TypeScript でuseState を使う際の注意点として、stateの型が推論できるかどうか ということに注意する必要がある。

(例)外部API にリクエストしてユーザー情報を取得、そのオブジェクトをstate に入れるような場合だと、初期値として渡せるような型を持ったデータがない

そういうときは型推論に任せず、useStateに明示的に型引数を渡してあげる必要がある

const [author, setAuthor] = useState<User>();
const [articles, setArticles] = useState<Article[]>([]);

• 上の１つ目の例では、引数に何も渡していないため初期値がundefinedのstate変数になる
  • 初期値に明示的にnull を入れたい場合は useState<User | null>(null) と書ける
• 2つ目の例は、初期値を渡しながらも型推論が使えない場合の書き方
  • そのまま引数として[] だけを渡すと 何の配列かコンパイラはわからないので、型引数でArticle[] を渡してあげる必要がある

stateの更新

const [count, setCount] = useState(0);
const increment = () => setCount((c) => c + 1);
// const increment = () => setCount(count + 1); ではだめ!!

const increment = () => setCount(count + 1); この書き方では、

レンダリング時点でのcount が0 だったとしたら、それを1 に上書きする処理を3 回繰り返すことになる

クラスコンポーネントではthis.state には常に最新の値が入ってるのに対して、 State Hook ではレンダリングごとにstate 変数は一定である