An open API service indexing awesome lists of open source software.

https://github.com/hemengke1997/context-state

react hooks state management library
https://github.com/hemengke1997/context-state

Last synced: about 2 months ago
JSON representation

react hooks state management library

Awesome Lists containing this project

README

        

# context-state

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

[中文文档](./README.zh.md)

## Install

```bash
npm i context-state
```

## Migrate

If you are using v3, please refer to [here](./docs/migrate-v4.md) 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

```tsx
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 (


{count}

ADD


);
}

function App() {
return (



);
}

render(, document.getElementById('root'));
```

## API

### `createContainer(useHook, options)`

```tsx
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`.

### ``

```tsx
const Container = createContainer(useCustomHook);
function ParentComponent({ children }) {
return {children};
}
```

### ``

```tsx
const Store = createStore(useCustomHook);
function ParentComponent({ children }) {
return {children};
}
```

### `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.

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

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

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

3. No parameters. Returns all values.

```tsx
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](https://github.com/jamiebuilds/unstated-next)

[use-context-selector](https://github.com/dai-shi/use-context-selector)

[hox](https://github.com/umijs/hox)