React Holmes πŸ” – Elementary State Orchestrator for React

πŸ” Holmes is a 0 config, fast and elementary state orchestrator for React.

Holmes has a very minimal API. It is as simple to use as React’s integrated hooks, but all state is globally accessible.

πŸ’‘ Easy as React state hooks

πŸ”„ State synchronization between components

πŸ›°οΈ Distributed and not centralized state

🀯 No mutable objects

πŸš€ Fast

Installation

npm i @devx-os/react-holmes or yarn add @devx-os/react-holmes

Docs

https://devx-os.github.io/react-holmes/

Why Holmes?

Holmes has one objective: make state management as easy and fast as possible.

React components has a built-in state object, where you store property values that belongs to the component.

When the state object changes, the component re-renders.

This behaviour has certain limitations:

Component state can only be shared by pushing it up to the common ancestor, but this might include a huge tree that then needs to re-render. React-Holmes adopts a new vision when talking about state handling.

As other state managers use an external single source of truth to hydrate app client on state change, React-Holmes does not create an external store and does not need to wrap your app in a context.

So, where is the global state?

There is no global state, actually.

The state is decentralized into components themselves.

The ONLY differences are the hook declared for state management and a key to identify state chunk.

While to declare a React state we need to declare it as:

const [state, setState] = React.useState('test');

with React-Holmes we need to declare it as:

const [state, setState] = useHolmesState('key', 'test');

Hooks

useHolmesState

Create a global state that can be observed by other components, this hook return the state and the setter function.

const [state, setState] = useHolmesState(key, initialState)

Example:

import React from 'react';
import { useHolmesState } from '@devx-os/react-holmes';

function MyComponent(props) {
  
  // useHolmesState returns an observable state value
  const [state, setState] = useHolmesState('myFirstGlobalState', 'initial value');

  return (
    <>
      {state}
      <button onClick={() => setState('new value')}>Change state</button>
    </>
  );
}

export default MyComponent;

useHolmesValue

Get only the value of a global state by the state key.

const value = useHolmesValue(key)

Example:

import React from 'react';
import { useHolmesValue } from '@devx-os/react-holmes';

function MyComponent2(props) {
  
  // access the value of the global state setted with useHolmesState
  const value = useHolmesValue('myFirstGlobalState');

  return (
    <>
      {value}
    </>
  );
}

export default MyComponent2;

GitHub

View Github