React state management solution with Context Like unstated-next, but Pro
npm i context-state
If you are using v3, please refer to here to upgrade to v4
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.
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'));
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
.
const Container = createContainer(useCustomHook);
function ParentComponent({ children }) {
return <Container.Provider>{children}</Container.Provider>;
}
const Store = createStore(useCustomHook);
function ParentComponent({ children }) {
return <Store.Provider initialValue={'value'}>{children}</Store.Provider>;
}
useStore
is used to get the return value from the Provider.
useStore
accepts 3 types of parameters:
- Array. Only returns the values corresponding to the keys.
function App() {
const { count } = Store.useStore(['count']);
}
- Function. Returns the return value of the function.
function App() {
const count = Store.useStore((store) => store.count);
}
- 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.