Reusable

Reusable is a solution for state management, based on React Hooks. It allows you to transform your custom hooks to singleton stores, and subscribe to them directly from any component.

Custom hook => Store

Pass your custom hooks to createStore:

const useCounter = createStore(() => {
  const [counter, setCounter] = useState(0);
  
  return {
    counter,
    increment: () => setCounter(prev => prev + 1)
  }
});

and get a singleton store, with a hook that subscribes directly to that store:

const Comp1 = () => {
  const something = useCounter();
}

const Comp2 = () => {
  const something = useCounter(); // same something
}

Then wrap your app with a provider:

const App = () => (
  <ReusableProvider> {/* no initialization code, stores automatically plug into the top provider */}
    ...
  </ReusableProvider>
)

Selectors

You can also use selectors, and your component will re-render only if the return value changed:

const Comp1 = () => {
  const isPositive = useCounter(state => state.counter > 0);
   // Will only re-render if switching between positive and negative
}

Using stores from other stores

Every store can use any other store, without worrying about provider order. Just use the store's hook inside the other store:

const useCurrentUser = createStore(() => ...);
const usePosts = createStore(() => ...);

const useCurrentUserPosts = createStore(() => {
  const currentUser = useCurrentUser();
  const posts = useCurrentUser();
  
  return ...
});

Check out the video

Check out the video where Maayan Glikser and Adam Klein announce the library for the first time and explain all about the problems it aims to solve and how it works:

The benefits

• Stores are decoupled from component tree
• You can use selectors and bail out of render
• Stores can co-depend without worrying about provider order
• It's easy to create packages that rely on global state, and plug them into apps seamlessly

Why do we need (yet) another state management library?

Most current state management solutions don't let you manage state using hooks, which causes you to manage local and global state differently, and have a costly transition between the two.

Reusable solves this by seemingly transforming your custom hooks into global stores.

Global Stores?!

Sounds like an anti-pattern, but in fact decoupling your state management solution from your component tree gives the developers a lot of flexibilty while designing both the component tree, and the app's state.

What about hooks+Context?

Using plain context has some drawbacks and limitations, that led us to write this library:

• Context doesn't support selectors, render bailout, or debouncing
• When managing global state using Context in a large app, you will probably have many small, single-purpose providers. Soon enough you'll find a Provider wrapper hell.
• When you order the providers vertically, you can’t dynamically choose to depend on each other without changing the order, which might break things.

Docs

Check out the docs here: https://reusablejs.github.io/reusable/docs/basic-usage.html

Feedback / Contributing:

We would love your feedback / suggestions Please open an issue for discussion before submitting a PR Thanks