◎
Almost nothing new to learn
Reuse the React knowledge you already have. Write a Store the same way you write a custom Hook.
Kerros
Share state between React components
From state management to state sharing. Keep Context scoping without rerendering every consumer when the Store changes.
Paste into your coding agent to install the package and Skill
Install @violetflux/kerros with this project's package manager, then run npx skills add violetflux/kerros --skill kerros --agent '*' -y to install the Kerros Skill for every compatible coding agent in this project.
createStore · Provider · selector
Share state in three steps
Pass an ordinary Hook to createStore, mount its Provider, then select exactly what the component needs.
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>⌁
Designed for refactoring
Stores and components use the same Hook API, so local component state can become shared state with very little work.
◇
Local and application-wide
Mount a Provider at the root for application state, or around one subtree for an isolated Store instance.
↗
Performance and types
Context locates the Store; selectors decide which components rerender. TypeScript inference stays complete.
Kerros
From state management to state sharing
Think about libraries such as Redux, Zustand, and Recoil. They can certainly share data, but their central job is still to organize state, update it, and define how data flows. “State management” is the right name for them.
Kerros focuses on a smaller and more direct problem. It does not invent a new data model or prescribe how async logic should work. It answers one question: how can a piece of Hook state be shared between React components?
When frequently changing state is shared through React Context directly, every Context value change rerenders all consumers. Kerros keeps Provider scoping and multiple instances, while selectors let each component subscribe only to the data it needs.
Passing value and onChange through layer after layer damages component boundaries. Moving everything into one global Store does not automatically make an application maintainable either.
Kerros stays simple, lightweight, and reliable. Write local state as an ordinary Hook, pass it to createStore when it needs to be shared, use a Provider to set its scope, and use selectors to choose what each component observes.