Introducing flooks v4

Features

• Gorgeous auto optimized re-render
• Intelligent loading state
• Interconnected modules
• Extremely simple API

Install

yarn add flooks

# npm install flooks

Usage

import useModel from 'flooks';

const counter = ({ get, set }) => ({
  count: 0,
  add() {
    const { count } = get();
    set({ count: count + 1 });
  },
  async addAsync() {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    const { add } = get();
    add();
  },
});

function Counter() {
  const { count, add, addAsync } = useModel(counter);

  return (
    <div>
      <p>{count}</p>
      <button onClick={add}>+</button>
      <button onClick={addAsync}>+~ {addAsync.loading && '...'}</button>
    </div>
  );
}

* Intelligent loading state - if someFn is async, someFn.loading is its loading state. If someFn.loading is not used, no extra re-render.

Demo

Gorgeous re-render optimization

Through proxy, flooks realizes a gorgeous auto optimization, re-render completely on demand, when React is truly "react".

useModel(someModel) returns a proxy, only actually used data will be injected into the component. If not used, just not injected.

Only functions never trigger re-render

const { fn1, fn2 } = useModel(someModel); // A component

const { b, setB } = useModel(someModel); // B component
setB(); // A no re-render

If only functions used in A, others update won't trigger A re-render.

Unused state never trigger re-render

const { a } = useModel(someModel); // A component

const { b, setB } = useModel(someModel); // B component
setB(); // A no re-render

If some state not used in A, others update won't trigger A re-render.

Unused loading never trigger re-render

const { someFn } = useModel(someModel); // A component
someFn(); // no someFn.loading, no extra re-render

If someFn.loading not used in A, someFn() won't trigger extra re-render.

If someFn is async, with normal loading solutions, even someFn.loading is not used, re-render will trigger at least twice (turn true then false). However, with flooks, no invisible loading updates, if someFn.loading is not used.

API

useModel()

const { a, b } = useModel(someModel);

get() & set()

import outModel from './outModel';

const someModel = ({ get, set }) => ({
  someFn() {
    const { a, b } = get(); // get own model
    const { x, y } = get(outModel); // get other models

    set({ a: a + b }); // payload style
    set((state) => ({ a: state.a + state.b })); // function style
  },
});

* Interconnected modules - call get(outModel) to get other models, all models can be connected.

License

MIT License (c) nanxiaobei

Pitiless Ads

If you use WeChat, please try "FUTAKE". It's a WeChat mini app for your inspiration moments. 🌈