Tiny (~500 B), easy and simple (P)React state management library
After a store update -> only components that use the updated property are rendered.
Install it with Yarn:
yarn add fragmented-store
Or install it with Npm:
npm install fragmented-store --save
The Provider is required for any of its child components to consume fragmented-store hooks.
import createStore from "fragmented-store";
const { Provider } = createStore({
username: "Aral",
age: 31
});
function App() {
return (
<Provider>
{/* rest */}
</Provider>
);
}The power of this library is that you can use fragmented parts of the store, so if a component uses only one field of the store, it will only re-render again if there is a change in this particular field and it will not render again if the other fields change.
For each of the fields of the store, there is a hook with its name, examples:
- username 👉
useUsername - age 👉
useAge - anotherExample 👉
useAnotherExample
import createStore from "fragmented-store";
const { useUsername } = createStore({
username: "Aral",
age: 31
});
function FragmentedExample() {
const [username, setUsername] = useUsername();
return (
<button onClick={() => setUsername("AnotherUserName")}>
Update {username}
</button>
);
}The advantage of this library is to use the store in a fragmented way. Even so, there are cases when we want to reset the whole store or do more complex things. For these cases, we can use the hook useStore.
import createStore from "fragmented-store";
const { useStore } = createStore({
username: "Aral",
age: 31
});
function UnfragmentedExample() {
const [store, update] = useStore();
return (
<>
<h1>{state.username}, {state.age}</h1>
<button onClick={() => update({ age: 31, username: "Aral" })}>Reset</button>
</>
);
}import createStore from "fragmented-store";
const { Provider, useUsername, useAge, useStore } = createStore({
username: "Aral",
age: 31
});
export default function App() {
return (
<Provider>
<Title />
<UpdateTitle />
<Age />
<AllStore />
</Provider>
);
}
function Title() {
const [username] = useUsername();
console.log("render Title");
return <h1>{username}</h1>;
}
function UpdateTitle() {
const [username, setUsername] = useUsername();
console.log("render UpdateTitle");
return (
<button onClick={() => setUsername((s) => s + "a")}>
Update {username}
</button>
);
}
function Age() {
const [age, setAge] = useAge();
console.log("render age");
return (
<div>
<div>{age}</div>
<button onClick={() => setAge((s) => s + 1)}>Inc age</button>
</div>
);
}
function AllStore() {
const [store, update] = useStore();
console.log({ store }); // all store
return (
<button onClick={() => update({ age: 31, username: "Aral" })}>Reset</button>
);
}