React Tagged State

⚛️ Global atomic state manager

React Tagged State uses signals API as SolidJS and S.js but without automatic deps tracking.

Basic Usage

1import {
2  createSignal,
3  useSelector,
4} from 'react-tagged-state';
5
6// create a signal
7const counter = createSignal(0);
8
9const Counter = () => {
10  // read value
11  const count = useSelector(counter);
12
13  return (
14    <button
15      onClick={() => {
16        // update value
17        counter((value) => value + 1)
18      }}
19    >
20      {count}
21    </button>
22  );
23};

API Overview

Signal

Signal is a value container. And also is just a function. You can read value by calling signal without arguments and write value by calling signal with next value. Simple.

1import { createSignal } from 'react-tagged-state';
2
3// create a signal
4const counter = createSignal(0);
5
6// read
7const value = counter();
8
9// write with value
10counter(10);
11
12// write with function
13counter((count) => count + 1);

Event

Event is a "write-only" signal. You can't read value, but you can dispatch next value.

1import { createEvent } from 'react-tagged-state';
2
3// create an event
4const reset = createEvent();
5
6// dispatch
7reset();

React & Hooks

useSelector bind signals with component. This is all what you need to sync signals with yuor components. You can use signals or selectors like you do in redux, of course.

Signal:

1import {
2  createSignal,
3  useSelector,
4} from 'react-tagged-state';
5
6const counter = createSignal(0);
7
8const Counter = () => {
9  const count = useSelector(counter);
10
11  return (
12    <button
13      onClick={() =>
14        counter((value) => value + 1)
15      }
16    >
17      {count}
18    </button>
19  );
20};

Component will be re-rendered on signal's value change.

Selector:

1import {
2  createSignal,
3  useSelector,
4} from 'react-tagged-state';
5
6const items = createSignal<
7  Partial<
8    Record<string, { id: string; title: string }>
9  >
10>({ id: { id: '0', title: 'title' } });
11
12const Item = ({ itemId }: { itemId: string }) => {
13  const item = useSelector(() => items()[itemId]);
14
15  if (!item) {
16    return null;
17  }
18
19  return <div>{item.title}</div>;
20};

Component will be re-rendered on selected value change.

Signal's Selector:

1import {
2  createSignal,
3  useSelector,
4} from 'react-tagged-state';
5
6const items = createSignal<
7  Partial<
8    Record<string, { id: string; title: string }>
9  >
10>({ id: { id: '0', title: 'title' } });
11
12const Item = ({ itemId }: { itemId: string }) => {
13  const item = useSelector(items, () => items[itemId]);
14
15  if (!item) {
16    return null;
17  }
18
19  return <div>{item.title}</div>;
20};

Component will be re-rendered on selected value change. This variant subscribes only to provided signal's changes. You should prefer this way if selector read value from single signal.

Subscription

Signals and events have on method. You can use this method to subscribe to signals and events outside your components or in useEffect.

1import {
2  createSignal,
3  subscribe,
4} from 'react-tagged-state';
5
6const counter = createSignal(0);
7
8const unsubscribe = counter.on(
9  (value) => {
10    console.log(value);
11  },
12);

Callback will be called on signal's value change or event's dispatch.

Example

Open CodeSandbox

Performance

See results on js-framework-benchmark.