Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nanxiaobei/flooks
๐ธ Auto Optimized State Manager for React Hooks
https://github.com/nanxiaobei/flooks
flooks flux hooks model react redux state store
Last synced: about 1 month ago
JSON representation
๐ธ Auto Optimized State Manager for React Hooks
- Host: GitHub
- URL: https://github.com/nanxiaobei/flooks
- Owner: nanxiaobei
- License: mit
- Created: 2019-07-29T23:37:39.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-08-08T17:31:58.000Z (3 months ago)
- Last Synced: 2024-09-21T15:47:56.589Z (about 2 months ago)
- Topics: flooks, flux, hooks, model, react, redux, state, store
- Language: TypeScript
- Homepage:
- Size: 1.14 MB
- Stars: 351
- Watchers: 8
- Forks: 42
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Link in bio to **widgets**,
your online **home screen**. โซ [๐ kee.so](https://kee.so/)
---
flooks
State Manager for React Hooks, Auto Optimized
[](https://www.npmjs.com/package/flooks)
[](https://github.com/nanxiaobei/flooks/actions/workflows/test.yml)
[](https://bundlephobia.com/result?p=flooks)
[](https://github.com/nanxiaobei/flooks/blob/main/src/index.ts)
[](https://github.com/nanxiaobei/flooks/blob/main/LICENSE)
English ยท [็ฎไฝไธญๆ](./README.zh-CN.md)
---
## Features
- Gorgeous auto optimized re-render
- Automatic request loading
- Extremely simple API
## Install
```sh
pnpm add flooks
# or
yarn add flooks
# or
npm i flooks
```
## Usage
```jsx
import create from 'flooks';
const useCounter = create((store) => ({
count: 0,
add() {
const { count } = store();
store({ count: count + 1 });
},
async addAsync() {
await new Promise((resolve) => setTimeout(resolve, 1000));
const { add } = store();
add();
},
}));
function Counter() {
const { count, add, addAsync } = useCounter();
return (
{count}
+
+~ {addAsync.loading && '...'}
);
}
```
**\* Automatic request loading** - if a function is async, `asyncFn.loading` is its loading state. If `asyncFn.loading` is not used, no extra re-render.
## Demo
[](https://codesandbox.io/s/flooks-gqye5?file=/src/Home.jsx)
## Auto optimization
flooks realizes a gorgeous auto optimization, only actually used data will be injected into the component, re-render completely on demand, when React is truly "react".
### Why flooks over zustand?
```js
// zustand, need a selector
const { nuts, honey } = useStore((state) => ({
nuts: state.nuts,
honey: state.honey,
}));
// flooks, not need a selector
// but also only `nuts` or `honey` update trigger re-render, it's automatic
const { nuts, honey } = useStore();
```
### Only functions, no re-render
```js
const { a } = useStore(); // A component, update `a`
const { fn } = useStore(); // B component, only functions, no re-render
```
### No updated state, no re-render
```js
const { a } = useStore(); // A component, update `a`
const { b } = useStore(); // B component, no `a`, no re-render
```
### No fn.loading, no extra re-render
```js
const { asyncFn } = useStore(); // A component, call `asyncFn`
asyncFn(); // No `asyncFn.loading`, no extra re-render
// With normal loading solutions, even `asyncFn.loading` is not used,
// it will re-render at least twice (turn `true` then `false`).
```
## API
### `create()`
```js
import create from 'flooks';
const useStore = create((store) => obj);
// For `react<=17`, you can use `create.config()` to pass
// `ReactDOM.unstable_batchedUpdates` for batch updating in async updates.
//
// create.config({ batch: ReactDOM.unstable_batchedUpdates }); // at app entry
```
### `store()`
```js
import create from 'flooks';
const useStore = create((store) => ({
fn() {
const { a, b } = store(); // get state
store({ a: a + b }); // update state by data
// or
store((state) => ({ a: state.a + state.b })); // update state by function
},
}));
```
## License
[MIT License](https://github.com/nanxiaobei/flooks/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)