◎
Selector-first
コンポーネントに必要な値だけをオブジェクトで選び、トップレベルを Object.is で比較します。
Kerros
コンポーネントツリーに沿う状態管理
任意の React Hook を selector-first Store に変換します。各 Provider が安定した境界となり、選択値が変わったコンポーネントだけを再レンダーします。
Coding Agent に貼り付けてパッケージと Skill をインストール
このプロジェクトのパッケージマネージャーで @violetflux/kerros をインストールし、npx skills add violetflux/kerros --skill kerros --agent '*' -y を実行して、互換性のあるすべての Coding Agent に Kerros Skill をインストールしてください。
createStore · Provider · selector
3 ステップで状態を共有
通常の Hook を createStore に渡し、Provider を配置して、コンポーネントに必要な値だけを選択します。
import { createStore } from '@violetflux/kerros'
import { useState } from 'react'
const [useCounter, CounterProvider] = createStore(() => {
const [count, setCount] = useState(0)
return { count, setCount }
})
function Counter() {
const { count, setCount } = useCounter(s => ({
count: s.count,
setCount: s.setCount,
}))
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
<CounterProvider>
<Counter />
</CounterProvider>⌁
Hook ネイティブ
Store は通常の名前付き React Hook です。useState、useReducer、SDK Hook をそのまま利用できます。
◇
コンポーザブル
Provider をネストし、内側の Store から外側の Store へ明示的な一方向依存を構成できます。
↗
React 17–19
公式 external-store shim を使い、利用可能な場合は React のネイティブ実装を優先します。