Meet Synapse: State Management Without the Ceremony

Source: Dev.to

Introduction

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.

Features

• Nuclei – state containers you create with createNucleus. 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.
• Set‑based updates – call set to update state. No actions, no reducers, no dispatch.

Usage Example

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

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

That’s it—no extra boilerplate.

Benefits

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.

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, giving fine‑grained updates without extra work.

Small and fast

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

Comparison with Traditional Store Pattern

Mental Model

Synapse favors a single mental model:

• State lives in nuclei or signals
• Update with set
• Subscribe with hooks

Less abstraction, fewer files, and clearer data flow.

TypeScript

Types and inference are available from day one.

DevTools

Inspect state, time‑travel, export/import for debugging—all integrated.

Middleware

• Logger
• Persist
• Immer‑style updates

Data Fetching

useQuery and useMutation for API integration.

Signals & Computed Values

• Signals – reactive values that don’t need a full nucleus.
• Computed values – derive state from other state.

Installation

npm i @forgedevstack/synapse

Quick Example

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

Conclusion

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