Link in bio towidgets,your onlinehome screen. ➫🔗 kee.so

State Manager for React Hooks, Auto Optimized

English ·简体中文

Features

Install

pnpm add flooks# oryarn add flooks# ornpm i flooks

Usage

importcreatefrom'flooks';constuseCounter=create((store)=>({count:0,add(){const{ count}=store();store({count:count+1});},asyncaddAsync(){awaitnewPromise((resolve)=>setTimeout(resolve,1000));const{ add}=store();add();},}));functionCounter(){const{ count, add, addAsync}=useCounter();return(<div><p>{count}</p><buttononClick={add}>+</button><buttononClick={addAsync}>+~{addAsync.loading&&'...'}</button></div>);}

Demo

Auto optimization

Why flooks over zustand?

// zustand, need a selectorconst{ 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 automaticconst{ nuts, honey}=useStore();

Only functions, no re-render

const{ a}=useStore();// A component, update `a`const{ fn}=useStore();// B component, only functions, no re-render

No updated state, no re-render

const{ a}=useStore();// A component, update `a`const{ b}=useStore();// B component, no `a`, no re-render

No fn.loading, no extra re-render

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()

importcreatefrom'flooks';constuseStore=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()

importcreatefrom'flooks';constuseStore=create((store)=>({fn(){const{ a, b}=store();// get statestore({a:a+b});// update state by data// orstore((state)=>({a:state.a+state.b}));// update state by function},}));

License