https://github.com/postor/use-reactive-immutable-state
https://github.com/postor/use-reactive-immutable-state
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/postor/use-reactive-immutable-state
- Owner: postor
- License: mit
- Created: 2024-06-17T10:29:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-18T08:00:31.000Z (over 1 year ago)
- Last Synced: 2025-03-18T07:47:33.262Z (10 months ago)
- Language: TypeScript
- Size: 41 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-reactive-immutable-state
Simplify your React state management with automatic immutability and reactivity. Effortlessly update complex data structures without worrying about performance or manual optimizations.
## usage
example: https://codesandbox.io/p/devbox/use-reactive-immutable-state-k256kf?file=%2Fsrc%2FApp.tsx
```
npm i use-reactive-immutable-state
```
```
import useReactiveImmutableState from "../lib/use-seemless-immu-state";
const btnStyle = { padding: '5px', background: '#eee', margin: '5px' }
export function App () {
const [state, setState] = useReactiveImmutableState({
title: "todolist",
todos: [
{
checked: true,
text: "task A",
},
{
checked: false,
text: "task B",
},
{
checked: false,
text: "task C",
},
],
});
return (
<>
{state.title}
{state.todos.map((x, i) => (
{
x.checked = !x.checked;
}}
>
{x.checked ? "✓" : "×"}
x.text = e.target.value} />
{
state.todos = state.todos.filter((_, j) => j !== i)
}}
>
{"🗑"}
))}
state.todos = [...state.todos, { checked: false, text: 'new item' }]}>add
>
);
}
```
**Notice**
use assignment instead of array methods like push/unshift/splice/sort.....
```
{/* good */}
state.todos = [...state.todos, { checked: false, text: 'new item' }]}>add
{/* bad */}
state.todos.push({ checked: false, text: 'new item' })}>add
```