use-atom-store
v0.0.3
Published
This library is aim to handle outer store's state in your react component that which solved the render accurately problem, I hope you will enjoy it.
Downloads
7
Readme
use-atom-store
This library is aim to handle outer store's state in your react component that which solved the render accurately problem, I hope you will enjoy it.
npm i use-atom-store -S
You can use this like:
import { createAtomStore, useAtomStore } from "use-atom-store";
let myStore = createAtomStore({ count: 0, hello: "hello" }); // create a store
function changeHello() {
myStore.setState((prev) => {
return {
...prev,
hello: prev.hello + "world",
};
});
}
function changeCount() {
myStore.setState((prev) => {
return {
...prev,
count: prev.count + 1,
};
});
}
export default function App() {
return (
<main>
<button onClick={changeHello}>Change Hello</button>
<button onClick={changeCount}>Change Count</button>
<DisplayHello></DisplayHello>
<DisplayCount></DisplayCount>
</main>
);
}
let helloRenderTimes = 0;
function DisplayHello() {
let [state, setState] = useAtomStore(myStore, (state) => ({
hello: state.hello,
}));
return (
<div
onClick={() => {
setState((prev) => ({ ...prev, hello: prev.hello + "world" }));
}}
>
{state.hello} - helloRenderTimes: {++helloRenderTimes}
</div>
);
}
let countRenderTimes = 0;
function DisplayCount() {
let [state, setState] = useAtomStore(myStore, (state) => ({
count: state.count,
}));
return (
<div
onClick={() => {
setState((prev) => ({ ...prev, count: prev.count + 1 }));
}}
>
{state.count} - countRenderTimes: {++countRenderTimes}
</div>
);
}
Automatic collect state of a store
If you want automatic collect state which you used in current component, you can use another api createAutoStore
and useAutoStore
, below is the demo:
import { memo } from "react";
import "./App.css";
import { createAutoStore, useAutoStore } from "./use-atom-store";
let testAutoStore = createAutoStore({ a: 1, b: 2, c: 3 });
function App() {
let state = useAutoStore(testAutoStore);
console.log("render A/B/C");
state.a;
state.b;
state.c;
return (
<div>
<button
onClick={() => {
state.a++;
}}
>
parent
</button>
<A></A>
<B></B>
<C></C>
</div>
);
}
let A = memo(function A() {
let state = useAutoStore(testAutoStore);
console.log("render A");
return <button onClick={() => testAutoStore.a++}>a{state.a}</button>;
});
let B = memo(function B() {
let state = useAutoStore(testAutoStore);
console.log("render B");
return <button onClick={() => testAutoStore.b++}>b{state.b}</button>;
});
let C = memo(function C() {
let state = useAutoStore(testAutoStore);
console.log("render C");
if (state.c > 5 && state.c < 10)
return <button onClick={() => testAutoStore.c--}>c{state.c}</button>;
return <button onClick={() => testAutoStore.c++}>c{state.c}</button>;
});
export default App;