https://github.com/alii/sosu

Global state manager for ⚛️ React with smart rerenders
https://github.com/alii/sosu

esm manager proxies react state

Last synced: 2 months ago
JSON representation

Global state manager for ⚛️ React with smart rerenders

• Host: GitHub
• URL: https://github.com/alii/sosu
• Owner: alii
• Created: 2022-07-23T06:02:13.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-25T15:56:28.000Z (over 2 years ago)
• Last Synced: 2024-10-03T12:39:52.063Z (3 months ago)
• Topics: esm, manager, proxies, react, state
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/sosu
• Size: 854 KB
• Stars: 33
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `sosu`

Sosu is a zero-dependency, ESM-only global state manager for React that tracks keys and intelligently rerenders

[Demo](https://codesandbox.io/s/sosu-demo-oftz7o?file=/src/App.tsx)

### Basic usage:

```tsx

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 
{age}
;

}

```


More advanced usage can be found in the [demo](https://codesandbox.io/s/sosu-demo-oftz7o?file=/src/App.tsx)

### 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](https://paco.me/writing/hook-getter).

### Contributing

This repo uses yarn and also [bun](https://bun.sh) to run the dev server. Make sure you have both installed, and run `bun run example` to start the dev server on :3000