0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

useStateを使うときのあの構文の意味

Posted at

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] を使うのではちょっと分かりづらくなります。だから代わりに分割代入を使うというわけです。

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?