最近気づいたことを備忘録としてまとめておきます。

僕はreactを触り始めて１年くらい経ちましたが今まで配列の分割代入をuseStateなどのHooksでしか見たことがありませんでした。

正直今まで全く気にしてもおらず何となく使っていたのですが、TSのタプル型を勉強している時にふと「なんでuseStateとかだけタプル的な返し方なんだろう...?」とふと気になりました。

正直あんまり調べてないので僕の意見になるのでご注意ください。

なぜオブジェクトの分割代入ではダメなのか

結論から言うと、「名前が被りまくって冗長すぎるから」だと思ってます。
同じコンポーネントないでuseStateを複数回呼び出すユースケースっていくらでもあると思うんですが、もしこれがオブジェクトだった場合どうなるでしょうか？

// 通常のuseState
const [ title, setTitle ] = useState('')
const [ description, setDescription ] = useState('')

// useStateの返り値が配列だったら
const { getter: title, setter: setTitle } = useState('')
const { getter: description, setter: setDescription } = useState('')

useStateからオブジェクトが返り値として返ってきた場合、仮にプロパティ名がgetterとsetterだとするならば、毎回別の名前を命名して代入する必要があります。冗長ですし不便ですね。

配列であればインデックスアクセスで済むので毎度再命名せずとも好きな名前で返り値を定義することができます。便利ですね。

なぜuseStateでこれが起こって、通常は起こり得ないのか

ではなぜこのユースケースがあまり見られないのでしょうか？
その答えは「関数の返り値を同じスコープ内で複数回呼び出して、別の名前で分割代入したい」というパターンが極端に少ないからだと考えています。

基本的に関数の返り値を分割代入したいのはHooksであったりapiなどからオブジェクトを取得したい場合だと思うのですが、その場合同スコープ内で何度もそれらが呼ばれることはない様に思われます。少なくとも僕は見たことがありません。

TSのタプル型があまり見られないのも同様の理由かもしれませんね。

逆にuseStateやuseCallbackなどは、同じ関数で別の状態を定義するため「関数の返り値を同じスコープ内で複数回呼び出して、別の名前で分割代入したい」となるわけですね。

タプル型を知った時に「こんなのどこで使うん？」と思ったんですが身近なところで有用性のある利用法が見つかってよかったです。