useStateを使うときのあの構文

これ。

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

仕事で使ってるときはなんとなーく使っていたけど、
Reactの復習中に改めて見直したらなんだこれ…となったので備忘録として残したい。
絶対忘れる。

JavaScriptの構文だった。

調べてみると、正体はjsの構文でした。
（しかもちゃんとドキュメントを読んでいればすぐわかるレベル）
お恥ずかしながら初めて知りました。

結論から書くと、上記の例の左辺の配列のうち、
1つ目の要素（上記の例だとcount）にstateの値、
2つ目の要素（上記の例だとsetCount）にstateを更新するための関数が返されているとのこと。

以下、Reactの公式ドキュメントより引用。
https://ja.reactjs.org/docs/hooks-state.html#tip-what-do-square-brackets-mean

この JavaScript の構文は “分割代入 (destructuring)” と呼ばれています。これが意味するところは、fruit と setFruit という名前の 2 つの変数を作って、useState から返される値のうち 1 つ目を fruit に、2 つ目を setFruit に代入する、ということです。これは以下のコードと等価です：

var fruitStateVariable = useState('banana'); // Returns a pair
var fruit = fruitStateVariable[0]; // First item in a pair
var setFruit = fruitStateVariable[1]; // Second item in a pair


>useState で state 変数を宣言する際、ペア、つまり 2 つの要素を含んだ配列が返されます。1 つ目の要素は state の現在の値、2 つ目の要素はそれを更新するための関数です。これらには特定の意味があるので、アクセスするのに [0] や [1] を使うのではちょっと分かりづらくなります。だから代わりに分割代入を使うというわけです。

#まとめ
なんとなーくコードを書くのをやめましょう、
そして公式ドキュメントはちゃんと読みましょう。（戒め）

ご指摘などありましたらコメントにていただけると助かります。