context-state

React state management solution with Context Like unstated-next, but Pro

中文文档

Install

npm i context-state

Migrate

If you are using v3, please refer to here to upgrade to v4

Advantage

React Context and useContext have some performance issues. When the context changes, all components that use the context will re-render. With context-state, developers don't need to worry about context penetration issues.

Example

import React from 'react';
import { createStore } from 'context-state';

function useCounter() {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount((c) => c + 1);

  return {
    count,
    increment,
  };
}

const CounterStore = createStore(useCounter);

function CounterDisplay() {
  const { count, increment } = CounterStore.usePicker(['count', 'increment']);

  return (
    <div>
      {count}
      <button
        type='button'
        onClick={increment}
      >
        ADD
      </button>
    </div>
  );
}

function App() {
  return (
    <CounterStore.Provider>
      <CounterDisplay />
    </CounterStore.Provider>
  );
}

render(<App />, document.getElementById('root'));

API

createContainer(useHook, options)

import { createStore, useMemoizedFn } from 'context-state';

function useCustomHook(props: {
  initialValue: string;
}) {
  const [value, setInput] = useState(props.initialValue);
  const onChange = useMemoizedFn((e) => setValue(e.currentTarget.value));
  return {
    value,
    onChange,
  };
}

const Store = createStore(useCustomHook, {
  // middlewares, used to listen to store changes
  middlewares: [{
    onInit: () => {},
    onChange: () => {}
  }]
});
// Store === { Provider, useStore }

If useCustomHook has parameters, they can be passed through Store.Provider.

<Container.Provider>

const Container = createContainer(useCustomHook);
function ParentComponent({ children }) {
  return <Container.Provider>{children}</Container.Provider>;
}

<Store.Provider>

const Store = createStore(useCustomHook);
function ParentComponent({ children }) {
  return <Store.Provider initialValue={'value'}>{children}</Store.Provider>;
}

Store.useStore()

useStore is used to get the return value from the Provider.

useStore accepts 3 types of parameters:

1. Array. Only returns the values corresponding to the keys.

function App() {
  const { count } = Store.useStore(['count']);
}

2. Function. Returns the return value of the function.

function App() {
  const count = Store.useStore((store) => store.count);
}

3. No parameters. Returns all values.

function App() {
  const store = Store.useStore();
}

For best performance, it is recommended to use 1 and 2, which can avoid unnecessary rendering.

Inspiration

unstated-next

use-context-selector

hox