flooks

Auto Optimized State Manager for React Hooks

nanxiaobei/flooksflooks

README

flooks v6


(Now Support React 18)

State Manager for React Hooks, Auto Optimized
npm GitHub Workflow Status Codecov npm bundle size npm type definitions GitHub

English · 简体中文



Features


- Gorgeous auto optimized re-render
- Automatic request loading
- Extremely simple API

Install


  1. ```sh
  2. yarn add flooks

  4. # npm i flooks
  5. ```

Usage


  1. ``` js
  2. import create from 'flooks';

  4. const useCounter = create((store) => ({
  5.   count: 0,
  6.   add() {
  7.     const { count } = store();
  8.     store({ count: count + 1 });
  9.   },
  10.   async addAsync() {
  11.     await new Promise((resolve) => setTimeout(resolve, 1000));
  12.     const { add } = store();
  13.     add();
  14.   },
  15. }));

  17. function Counter() {
  18.   const { count, add, addAsync } = useCounter();

  20.   return (
  21.     <div>
  22.       <p>{count}</p>
  23.       <button onClick={add}>+</button>
  24.       <button onClick={addAsync}>+~ {addAsync.loading && '...'}</button>
  25.     </div>
  26.   );
  27. }
  28. ```

*\ 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

Edit flooks

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?


  1. ``` js
  2. // zustand, need a selector
  3. const { nuts, honey } = useStore((state) => ({
  4.   nuts: state.nuts,
  5.   honey: state.honey,
  6. }));

  8. // flooks, no selector needed
  9. // but also only `nuts` or `honey` update triggers re-render, it's automatic!
  10. const { nuts, honey } = useStore();
  11. ```

Only functions, no re-render


  1. ``` js
  2. const { a } = useStore(); // A component, update `a`
  3. const { fn } = useStore(); // B component, only functions, no re-render
  4. ```

No updated state, no re-render


  1. ``` js
  2. const { a } = useStore(); // A component, update `a`
  3. const { b } = useStore(); // B component, no `a`, no re-render
  4. ```

No \*.loading, no extra re-render


  1. ``` js
  2. const { asyncFn } = useStore(); // A component, call `asyncFn`
  3. asyncFn(); // No `asyncFn.loading`, no extra re-render

  5. // With normal loading solutions, even `asyncFn.loading` is not used,
  6. // it will re-render at least twice (turn `true` then `false`).
  7. ```

API


create()


  1. ``` js
  2. import create from 'flooks';

  4. const useStore = create((store) => storeData);

  6. // For `react<=17`, you can use `create.config()` to pass
  7. // `ReactDOM.unstable_batchedUpdates` for batch updating in async updates.
  8. //
  9. // create.config({ batch: ReactDOM.unstable_batchedUpdates }); // at app entry
  10. ```

store()


  1. ``` js
  2. import create from 'flooks';

  4. const useStore = create((store) => ({
  5.   fn() {
  6.     const { a, b } = store(); // get store

  8.     store({ a: a + b }); // update store by payload
  9.     // or
  10.     store((state) => ({ a: state.a + state.b })); // update store by function
  11.   },
  12. }));
  13. ```

License


MIT License (c) nanxiaobei

FUTAKE


Try [FUTAKE](https://sotake.com/f) in WeChat. A mini app for your inspiration moments. 🌈

undefined