Meet Synapse: State Management Without the Ceremony

Ultra-simple state management for React. No dispatch, no reducers, just signals.

If you've ever felt that state management was more work than it needed to be, Synapse is worth a look.

What is Synapse?

Synapse is a tiny state management library for React. It gives you:

• Nuclei — state containers you create with createNucleus. You define initial state and update logic in one place.
• Signals — lightweight reactive primitives for simpler cases.
• Hooks — useNucleus, usePick, useSignal, etc., to read and update state from components.

You call set to update state. No actions, no reducers, no dispatch.

const counterNucleus = createNucleus((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

function Counter() {
  const { count, increment } = useNucleus(counterNucleus);
  return <button onClick={increment}>{count}</button>;
}

That’s it. No extra boilerplate.

---

Why Synapse?

1. Less ceremony

Traditional store-based libraries often need actions, reducers, selectors, and middleware. Synapse skips that. You define state and how it changes in one place, and you use it directly in components.

2. Built for how we actually write React

Updates are synchronous where possible, async when you need it. usePick subscribes only to the fields you care about, so you get fine-grained updates without extra work.

3. Small and fast

Under 2KB gzipped. Fewer concepts and less runtime overhead.

---

Why choose Synapse over other libraries?

Without pointing at any specific tool, here’s how Synapse compares to common patterns:

Traditional store pattern	Synapse
Heavy boilerplate	Minimal setup
Steep learning curve	Easy to get started
Many concepts (actions, reducers, etc.)	One main concept: set
Large or fragmented bundle	~2KB gzipped
Async often needs extra middleware	Async built in
DevTools as separate concern	DevTools integrated
Selectors to avoid over-renders	usePick by default

Synapse favors a single mental model: state lives in nuclei or signals, you update with set, and you subscribe with hooks. Less abstraction, fewer files, and clearer data flow.

---

What you get out of the box

• TypeScript — types and inference from day one.
• DevTools — inspect state, time-travel, export/import for debugging.
• Middleware — logger, persist, immer-style updates.
• Data fetching — useQuery and useMutation for API integration.
• Signals — for reactive values that don’t need a full nucleus.
• Computed values — derive state from other state.

---

Try it

npm i @forgedevstack/synapse

import { createNucleus, useNucleus } from '@forgedevstack/synapse';

const counterNucleus = createNucleus((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));

function App() {
  const { count, increment } = useNucleus(counterNucleus);
  return <button onClick={increment}>{count}</button>;
}

---

Summary

Synapse is a lightweight, low-ceremony state library for React. It keeps the API small, the bundle tiny, and the mental model simple. If you’re tired of boilerplate-heavy state management, it’s worth a try.

🔗 npm · Documentation

Comments

[Martijn Assie]

This looks really clean and easy to follow. I like how you focus on removing ceremony instead of adding yet another abstraction layer. The example makes it very clear what the benefit is, especially for people tired of reducer-heavy setups.