https://github.com/unix/backset
Minimalist state tool for React apps.
https://github.com/unix/backset
backset react-state
Last synced: 3 months ago
JSON representation
Minimalist state tool for React apps.
- Host: GitHub
- URL: https://github.com/unix/backset
- Owner: unix
- License: mit
- Created: 2020-06-03T19:39:38.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-05T21:00:32.000Z (about 5 years ago)
- Last Synced: 2025-03-10T18:11:19.075Z (4 months ago)
- Topics: backset, react-state
- Language: TypeScript
- Homepage: https://backset.now.sh
- Size: 449 KB
- Stars: 13
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Backset
A minimalist state tool for React apps.
- Very few APIs.
- Based on React Hooks and Context.
- Tracking and eliminate unnecessary re-renders.
- No redundant template code.
- Gzipped ≈ `1.5kb`.
### Easy to use
- `backset` is based on `React.Context`.
- `backset` is designed to let you write less code.
This is the simplest implementation of count under `backset` and `React.Context`,
Obviously, **`backset` is shorter and easier to read**, if you have multiple components or pass more values,
the advantage of `backset` will be more obvious.
You also can see their differences in the [codesandbox editor](https://codesandbox.io/s/backset-vs-context-zi7vd?file=/src/native-context.jsx).
Count example with backset
Count example with Native Context
### Performance & Optimization
We all know that the native React.Context will [render repeatedly](https://github.com/facebook/react/issues/15156#issuecomment-474590693),
unless you use the `React.Memo` wrap component or the `useMemo` wrap render function, this requires a lot of repetitive code.
You don't have to think about these problems when using `backset`, it provides the `useTracked` API to automatically track state,
this means:
- Better performance without changing any code.
- Still `hooks`, still your favorite style.
- Switch at any time, no duplicate code.
**Click to [view this example online](https://codesandbox.io/s/backset-tracked-f3vrw?file=/src/app.js).**
Automatically avoids unnecessary rendering
### Experience & API Design
Although `backset` looks magical, it doesn't make any hacks.
`backset` can intelligently provide all types of inference, it can even check your properties by type,
Using `backset` in your project is definitely a pleasure!
Automatically tips and constraints
### Quick start
1. Run `yarn add backset` or `yarn i backset` install it.
2. Create a store and use it:
```jsx
import { create } from 'backset'
const { useStores, useUpdates, withContext } = create({ title: 'Hello World' })
const Child = () => {
const updates = useUpdates()
return updates.title('Hello Backset')}>Edit
}
const App = () => {
const { title } = useStores()
return
{title}
}
export default withContext(App)
```
[Edit this example on codesandbox](https://codesandbox.io/s/backset-quick-start-xj1p9?file=/src/index.js).
### Documentation
- [Document Site](https://backset.now.sh)
### LICENSE
[MIT](https://github.com/unix/backset/blob/master/LICENSE)