はじめに
この記事でuseStateの初期値で躓いたので、初期値を入れるべきかどうか。
なんで、初期値を設定しなくてはいけないかについて調べてみました。
問題
useStateの初期値を空にすると、後ほど値を入れたときに警告が出たり、そもそもデータ型は何を入れるデータ型だったのかがわからなくなったりする。
特にinputと組み合わせで警告が出たりする。(非制御→制御コンポーネントの場合)
初期値の種類
大体以下のものである。
// 数値型
const [number, setNumber] = useState(0);
// 文字列型
const [string, setString] = useState("Hello world");
// 配列
const [any, setAny] = useState([]);
// オブジェクト
const [userInfo, setUserInfo] = useState({ test1: "", test2: 0 });
// ブール値
const [isOpen, setIsOpen] = useState(false);
何も入れない場合は、undefinedが入ってる状態になる。
//undefined
const [number, setNumber] = useState();
初期値を入れるとどうなるのか？
結論、useState の初期値の違いで、state に入る「型」や「初期状態」が変わります。つまり、state がどういうデータを持つのかが決まる訳です。
JavaScriptだと「渡した初期値から型が推測される」ためです。
#初期値を入れるべきか？
結論、入れるべきだと思います。
メリットとしては
- 明確な状態の定義
- 意図しない挙動の防止
- 最初の状態の確定
です。
TypeScriptなどを使って型を厳格かすることが昨今増えているので、JavaScriptでも型の意識は少し必要なのかなと思いました！
おわりに
JavaScriptのいいところでもあるのですが、型を変えても実行時エラーは出ない。ただし動作が不安定になりやすいって感じですかね。
参考