Reactの useState
フックは、関数コンポーネントで状態を管理するためのものです。useState
に引数として渡される値は、その状態の初期値になります。
useState(null)
を使用すると、状態変数の初期値がnull
に設定されます。これは、状態が初期レンダリング時に未定義または空であるべき場合、または特定の値がまだ利用可能でない場合に役立ちます。
以下に一例を挙げます:
import React, { useState } from 'react';
function MyComponent() {
// user状態の初期値をnullに設定
const [user, setUser] = useState(null);
// 何らかの非同期操作(API呼び出し、データ取得等)を行い、
// 結果が得られ次第、setUserを呼び出してuser状態を更新すると想定
// その結果が得られるまで、userはnullのままです。
if (user === null) {
return <div>Loading...</div>; // データがまだ得られていない場合の処理
} else {
return <div>Welcome, {user.name}!</div>; // データが得られた場合の処理
}
}
export default MyComponent;
このように、useState(null)
は、状態の初期値が明示的にnull
であるべき場合、または非同期に取得するデータを待つ場合などに便利です。