useStateの[]は何？配列の分割代入から理解しよう

Reactを書いていると、次のようなコードをよく見かけます。

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

初見だと、これはなんだ？？と疑問に感じるかもしれません。

実は、この[]はReact専用の特別な記号ではありません。

前回の記事で学んだ、JavaScriptの配列の分割代入です。

今回は、前回学んだ内容を使いながら、useStateのコードを一つずつ分解してみましょう。

useStateの復習

これまでの記事で、useStateを使ってStateを管理してきました。

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

このコードでは、

• count → 現在のState
• setCount → Stateを更新するための関数
• 0 → 初期値

という役割になっています。

useStateをいったん分解して考えてみよう

まず、次のコードを見てください。

useState(0)

ここでは、useStateという関数を実行しています。

そして、ここで一度、useState(0)が配列を返す関数だと考えてみましょう。

useState(0)

↓

[0, 関数]

すると、次のコードのようになります。

const [count, setCount] = [0, 関数];

これは、前回学んだ配列の分割代入です。

配列の1番目がcountに入り、2番目がsetCountに入ります。

[0, 関数]

↓ 分割代入

count    → 0
setCount → 関数

つまり、

countにはStateの値が入り、setCountにはStateを更新するための関数が入る

ということになります。

useStateは配列を返す？？

ここで、

「関数なのに、なんで配列を返すの？」

と思うかもしれません。

実は、JavaScriptでは関数が配列を返すことは普通にできます。

例えば、自分で次のような関数を作ってみましょう。

function getUser() {
  return ["太郎", 20];
}

この関数を実行すると、

getUser();

↓

["太郎", 20]

という配列が返ってきます。

そのため、次のように書くことができます。

const [name, age] = getUser();

これは、

["太郎", 20]

↓

name → "太郎"
age  → 20

という分割代入です。

useStateも、考え方としてはこれと同じように、返ってきた値を配列の分割代入で受け取っています。

useStateのコードをもう一度見てみよう

ここまで理解したところで、最初のコードをもう一度見てみましょう。

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

これをイメージとして分解すると、

useState(0)

↓

[0, 更新用の関数]

↓

const [count, setCount] = [0, 更新用の関数]

↓

count    → 0
setCount → 更新用の関数

となります。

つまり、

「useState(0)を実行して返ってきた配列の、1番目をcount、2番目をsetCountという名前で使います」

という意味だと考えると、かなり分かりやすくなります。

だからsetCount()でStateを更新できる

ここまで分かると、次のコードも理解しやすくなります。

setCount(10);

setCountには、useStateから返された更新用の関数が入っています。

そのため、setCount(10)を実行すると、Stateを10に更新する処理が行われます。

そしてStateが更新されると、Reactがコンポーネントを再レンダーし、画面に表示しているcountも新しい値になります。

setCount(10)

↓

Stateが更新される

↓

Reactが再レンダーする

↓

countが10になる

↓

画面に10が表示される

この流れまでつながると、useStateの仕組みがかなり見えやすくなります。

この形を覚えておこう

最後に、今回の内容をシンプルな形にまとめてみましょう。

const [A, B] = 関数();

この形を見たら、

関数を実行

↓

配列が返ってくる

↓

配列の1番目 → A
配列の2番目 → B

という流れをイメージしてみてください。

そして、

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

なら、

useState(0)
  ↓
[Stateの値, 更新用の関数]
  ↓
count    → Stateの値
setCount → 更新用の関数

と考えればOKです。

まとめ

今回は、useStateの次のコードについて詳しく見ていきました。

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

ポイントは、[]がJavaScriptの配列の分割代入だということです。

useState(0)を実行すると、Stateの値と更新用の関数を含む値が返ってきます。

その返ってきた値を分割代入することで、

count    → Stateの値
setCount → Stateを更新する関数

として、それぞれ利用できるようになります。

最初は少し不思議に見えた、

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

というコードも、JavaScriptの分割代入を知っていれば、少し身近に感じられるのではないでしょうか。

Reactのコードを理解するためには、Reactだけではなく、その土台になっているJavaScriptの仕組みを知ることも大切です。

今回のように「この書き方は何を意味しているんだろう？」と一つずつ分解していくと、Reactのコードも少しずつ読みやすくなっていきます。