https://github.com/roman-koshchei/mutato
Lightweight mutable react state
https://github.com/roman-koshchei/mutato
mutable mutato react state state-management store typescript
Last synced: 5 months ago
JSON representation
Lightweight mutable react state
- Host: GitHub
- URL: https://github.com/roman-koshchei/mutato
- Owner: roman-koshchei
- License: mit
- Created: 2022-10-22T12:02:13.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-05-27T10:07:42.000Z (over 2 years ago)
- Last Synced: 2025-08-17T21:39:25.619Z (5 months ago)
- Topics: mutable, mutato, react, state, state-management, store, typescript
- Language: TypeScript
- Homepage: https://mutato.vercel.app
- Size: 455 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
How I expect it to work. It's especially comfortable during working with arrays. Motivated by [valtio](https://github.com/pmndrs/valtio).
```bash
npm install mutato
# or
yarn add mutato
```
## useMutato
Shared state (rerender parent components)
```tsx
let store = {
nums: [34, 45, 87],
selected: -1
}
const Parent = () => {
// say that we want track chenges of store
useMutato(store)
return
{store.nums.map((num, i) => )}
}
const Child = ({val, i}: {val:number, i: number}) => {
// can not call useMutato if you sure
// that parent component will call useMutato
// but in that example let's do it
useMutato(store)
// swap of 2 items if one selected
const swap = () => mutate(() => {
if (store.selected == -1) {
store.selected = i
} else {
store.nums[i] = store.nums[store.selected]
store.nums[store.selected] = num
store.selected = -1
}
}, [store])
return (
{num}
)
}
```
## useLocalMutato
Doesn't rerender parent components. Need less memory.
```tsx
let store = {
items: [34, 45, 87]
}
const SwapComponent = () => {
const mutate = useLocalMutato(store)
// simple swap of 2 items
const swap = () => mutate(store => {
const first = store.items[0]
store.items[0] = store.items[1]
store.items[1] = store.first
})
return ...
}
```