sosu

Sosu is an ESM-only global state manager for React that tracks keys that are used in your store.

Demo

Usage:

import {store} from 'sosu';

const {useStore, useSet} = store({
	age: 0,
	name: 'alistair',
});

function App() {
	// This component will only rerender when age changes,
	// and never name. This is because it is not "tracked"
	// or "used" in our destructure.
	const {age} = useStore();

	return <div>{age}</div>;
}

Wait, what? How does this work

Sosu uses proxies and getters to figure out which keys of an object are actually accessed. It then subscribes to listen to those keys only and will rerender your components as necessary.

There is a demo in the public folder here. It’s a simple example that proves that the components are only rerendering when they need to!

Let me read more…

Okay, I hear you. This package was hugely inspired by the wonderful Paco Coursey, who wrote a few words about this exact topic. In fact, a lot of the code here is taken from this blog post.

Contributing

This repo uses yarn and also bun to run the dev server. Make sure you have both installed, and run bun run example to start the dev server on :3000

GitHub

View Github