ReactNativeのフックuseStateとは？徹底解説

2023年6月4日 2023年6月4日

abyblog

useStateはネイティブアプリ開発ではとってもよく使うフックの一つです。

フックは、他にもuseEffectなどや他にもいくつかありますが、useStateが一番多用するものだと言って良いでしょう。

useStateとはなんなのか、どんなメリットがあるのか、を解説していきます。

目次（クリックで読みたい部分にジャンプできます）

1 useStateはどんな時に使うのか？
2 useStateについて理解する
3 状態の更新＝関数の再実行
4 まとめ

useStateはどんな時に使うのか？

まず、useStateとはどんな時に使うメソッドなのかを紹介します。

useStateとは、一言で言うと、「状態を管理する」メソッドです。

memosという変数があったとすると、useStateを使うことで、常にmemosを監視しmemosに更新をかけられるようになっています。

例えば、、一番よく使うのが、TextInputなどに、テキストを書く時です。通常、TextInputの中では文字を入力しても文字が入力されません。そこで、useStateを用います。文字が入力されたと同時に、useStateの中の関数を実行し、変数を更新するなどです。これにより、TextInputの中に文字を入力することができるようになります。

以下のように、valueにbodyTextという変数を割り当てています。

そして、onChangeTextという、文字が変更されたら実行される関数にコールバック関数を実行するようにしています。このコールバック関数の中身にある、setBodyTextが後にも説明します、useStateの使い道です。

const [ bodyText, setBodyText ] = useState('');

~~~~~~~~~略~~~~~~~~~~~~~~

<TextInput 
     value={bodyText}
     onChangeText={(text) => { setBodyText(text); }}
/>

useStateについて理解する

useStateとは、通常以下のように書かれます。

useStateの書き方

const [ bodyText , setBodyText ] = useState(' ')

bodyText : 状態

setBodyText：状態を更新する関数

'　' :　bodyTextの初期値

※「bodyText」や「setBodyText」などの変数・関数の名称は自由に決めて大丈夫です。ただ、通例で[〇〇,set〇〇] のように表すことが多いです。

このように、useStateの戻り値は、最初の要素が「状態」、その次の要素が「状態を更新する関数」という配列で提供されています。

状態の更新＝関数の再実行

先ほど例にも出した以下のようなコードを見てください。

const [ bodyText, setBodyText ] = useState('');

~~~~~~~~~略~~~~~~~~~~~~~~

<TextInput 
     value={bodyText}
     onChangeText={(text) => { setBodyText(text); }}
/>

この場合の処理の流れとしては

①TextInputの中に、Textが入力される（＝onChangeTextがスタート）

②onChangeTextの中で、setBodyText()が実行される。

＝＝setBodyTextとは、引数に与えられた値（今回はtext）をbodyTextに代入する関数です。

③すると、bodyTextが更新され、valueに表示されるbodyTextの中身が更新され、文字が入力されたように見える。

この①〜③を文字が入力・削除されるたび、実行されるようになっています。

つまり、文字が更新されると同時に関数が実行されることにより、状態が更新される。ということになります。

また、他にもuseStateは使うことができます。例えば、要素を一覧表示にしているページの変数を管理したりするときもuseStateを使うことができます。いろいろな使い方があり、アプリを作成するときは必ず使うものなので、ぜひ使えるようにしておくと良いでしょう。