ReactのuseStateについて丁寧に理解する - Qiita

はじめに useStateはReactの関数コンポーネントで使われる代表的なAPIの1つで、シンプルかつ便利なのでよく使われる馴染み深い機能です。この記事ではそんなuseStateについて踏み込んで解説します。 この記事で述べるコンポーネントとは基本的にReactの関数コンポーネントを指します。 状態 useState自体がどのような振る舞いを持つAPIなのかを紹介する前に、useStateを学ぶ時に必要となる状態(State)という概念を紹介します。 状態とはコンポーネントのレンダリング間で保持され、変更することで再レンダリングが起きるような値のことを指します。言い換えると、状態はコンポーネントがアンマウントされる(使われなくなる)までのライフサイクル間で共有され、更新する度にコンポーネントを再計算させるような値です。 レンダリングとはReactが何らかのトリガーを感知した時に対象のコン