useState

ソース
useState コンポーザブルは、リアクティブで SSR フレンドリーな共有状態を作成します。

使用方法

// Create a reactive state and set default value
const count = useState('counter', () => Math.round(Math.random() * 100))
ドキュメント > 4 X > はじめに > 状態管理で詳細をお読みください。
useState 内のデータは JSON にシリアル化されるため、クラス、関数、シンボルなど、シリアル化できないものを含まないことが重要です。
useState はコンパイラによって変換される予約済みの関数名であるため、独自の関数に useState という名前を付けないでください。

shallowRef の使用

状態を深くリアクティブにする必要がない場合は、useState とshallowRefを組み合わせることができます。これにより、状態が大きなオブジェクトや配列を含む場合にパフォーマンスが向上します。

const state = useState('my-shallow-state', () => shallowRef({ deep: 'not reactive' }))
// isShallow(state) === true

タイプ

署名
export function useState<T> (init?: () => T | Ref<T>): Ref<T>
export function useState<T> (key: string, init?: () => T | Ref<T>): Ref<T>
  • key: リクエスト全体でデータフェッチが適切に重複排除されることを保証する一意のキー。キーを指定しない場合、useState のインスタンスのファイルと行番号に一意のキーが生成されます。
  • init: 初期化されていない場合に状態の初期値を提供する関数。この関数は Ref を返すこともできます。
  • T: (TypeScript のみ) 状態の型を指定します