Forem: Mayank

🚀 Ditch Redux: Build a Global Store in 40 Lines with useSyncExternalStore

Mayank — Tue, 02 Sep 2025 14:11:57 +0000

State management is one of the trickiest parts of any React app.
Libraries like Redux, Zustand, and Jotai are popular choices — but did you know React already ships with everything you need?

In this article, we’ll build a shopping cart demo powered entirely by a tiny custom store (~100 lines of code) using the native useSyncExternalStore hook.

🔎 Why `useSyncExternalStore`?

React introduced useSyncExternalStore in v18 to provide a safe way to subscribe to external stores.
It ensures consistent updates, even with concurrent rendering, and removes the need for prop drilling. You can update state from anywhere, even outside React's realm and your UI will react to changes.

🏗️ The Store Implementation

Here’s the heart of our system (syncjs.ts):

import { useSyncExternalStore } from 'react'

export class Store<T> {
  subs = new Set<() => void>()
  constructor(private state: T) {
    this.subscribe = this.subscribe.bind(this)
    this.update = this.update.bind(this)
  }
  get snapshot() {
    return this.state as Readonly<T>
  }
  subscribe(cb: () => void) {
    this.subs.add(cb)
    return () => this.subs.delete(cb)
  }
  update(fn: (state: Readonly<T>) => T) {
    this.set(fn(this.snapshot))
  }
  async update$(fn: (state: Readonly<T>) => Promise<T>) {
    this.set(await fn(this.snapshot))
  }
  set(state: T) {
    if (this.state === state) return
    this.state = state
    this.subs.forEach((cb) => cb())
  }
}

export function useStore<T>(store: Store<T>): Readonly<T>
export function useStore<T, R>(
  store: Store<T>,
  selector: (state: T) => R,
): Readonly<R>
export function useStore<T, R>(store: Store<T>, selector?: (state: T) => R) {
  return useSyncExternalStore(store.subscribe, () => {
    return selector ? selector(store.snapshot) : store.snapshot
  })
}

With just this, you can hold global state (Store<T>), update it and have strongly typed subscriptions with useStore

No reducers. No boilerplate. Just React.

🛒 The Action Pattern

To manipulate store, it is recommended to create store and actions in seperate files.

create your store with Store class
create action functions to update store using it's update, update$ (async) or set methods
Export both the store and actions, so components can subscribe to state and call actions — without knowing how the store works internally.

This keeps your UI lean, and your state logic centralized.

import { Store } from './syncjs'

type CartItem = {
  id: number
  price: number
  count: number
}

// 1. Create the store
export const $cart = new Store<CartItem[]>([])

// 2. Define actions [ simple demo]
const addItem = (item: Omit<CartItem, 'count'>) => {
  if($cart.snapshot.some(p => p.id === item.id) return;
  $cart.update(cart => [...cart, { ...item, count: 1 }])
}

const removeItem = (id: number) => {
  $cart.update(cart => cart.filter(item => item.id !== id))
}

const clearCart = () => {
  $cart.update(() => [])
}

// 3. Export grouped actions
export const cartActions = {
  addItem,
  removeItem,
  clearCart,
}

⚛️ Now in your Components, you can just consume the store and call actions on it. Here, useStore($cart, selector) ensures this button only re-renders when item[id] is added or removed in list, not when unrelated items update. That’s the magic of selectors.

function ProductButton({ id, price } : IProduct) {
  const inCart = useStore($cart, cart =>
    cart.some(item => id === props.id)
  )

  if (!inCart) {
    return (
      <button onClick={() => cartActions.addItem({id, price})}>
        Add to cart
      </button>
    )
  }
  return (
      <button onClick={() => cartActions.removeItem(id)}>
        Remove from cart
      </button>
    )
}

If the state of Store depends on async operations (like server data), you can simply use this type for Store

const products = new Store<{
  data: IProduct[] | null
  loading: boolean
  error: string
}>({
  data: null,
  loading: false,
  error: '',
})

⚡ Superpowers in few extra lines

You can add a localStorage persistor for your store, simply by subscribing to it

export function addPersistor<T>(store: Store<T>, key: string): void {
  const state = localStorage.getItem(key)
  if (state) store.set(JSON.parse(state))
  store.subscribe(() => {
    localStorage.setItem(key, JSON.stringify(store.snapshot))
  })

//after creating your store somewhere
addPersistor(mystore, 'mystore')

That’s it — no external dependencies, just React.

🎯 Takeaways

You can replace heavy libraries with a tiny, predictable store using React's provided solutions
Fine-grained subscriptions via selectors keep your app fast.
You can write your custom addons for store easily [like addLogger]

This demo app shows that managing global state doesn’t have to be complicated.

🏃 Try It Yourself

You can look at Product Display App at repo

git clone git@github.com:mynk-tmr/cart-use-sync-external-store.git
cd cart-use-sync-external-store
npm install
node --run dev

Play with app, Inspect the logger, Reload window and cart persists. Code also includes how to handle async updates.

Fly to cart animation with Pure Javascript in few lines.

Mayank — Wed, 25 Sep 2024 12:02:39 +0000

Recently, I stumbled upon an old tutorial showcasing a fly-to-cart animation using jQuery. I wanted to challenge myself by implementing the same effect using pure JavaScript.

I created a simple layout with products and a shopping cart icon. The styling doesn't matter so we won't discuss it here.

The trick is to clone the image of product, prepend it to the product element. Then calculate the coordinates of your cloned image and cart icon, get the difference and translate your image to it. You can add extra effects like scaling to 0 or opacity fading. Add a transition property for it to actually animate the changes in style

If you want to put animations on cart icon too, use the transitionstart and transitionend event on cloned Image to add and remove a CSS class with animation set on it.

Easily build progressive Steps Rendering Component in Reactjs

Mayank — Mon, 12 Feb 2024 11:52:11 +0000

Infinite Scroll Component with Intersection Observer API

Mayank — Wed, 17 Jan 2024 19:57:54 +0000

It's so powerful, there are endless possiblities with Intersection Observer. 👋

Drag and Drop Components with basic CSS & Javascript

Mayank — Wed, 17 Jan 2024 18:24:22 +0000

This is a prototype over which you can make your own fancy component. This should work irrespective of wherever you place the containers of draggable items.

Create signals in React with 5 lines of code !

Mayank — Sat, 13 Jan 2024 23:36:07 +0000

Signals are creating a buzz in the frontend ecosystem because of being simple to create, consume and understand. While frameworks like Preact, Qwik, Svelte and Angular(?) have implemented them, React seems to avoid them.

What are signals

As per Preact documentation, Signals are reactive primitives for managing application state. In React, creating and updating state is a "weird" process. You useState and destructure it. Then, to updating state you must use setState() which must receive a completely new object for re-render to happen.

With signals, you can directly modify the state value to cause re-renders. Here is a 5 line implementation of such a feature with custom hook,

function useSignal(init) {
  const [state, setState] = useState(init);
  return { 
    get mut() { return state },
    set mut(_new) { setState(_new) } //I love closures !!!
  }
}

function Counter() {
  const count = useSignal(0);
  return (<>
   <div>Counter: {count.mut}</div>
   <button onClick={() => ++count.mut}>Increment</button>
  </>);
}

Clean and Elegant right ? This new mental modal of mutation causes re-render makes our code more readable and concise, which Svelte.js is also based on.

But there is a caveat, this works for primitives. If you have an array / object state value and try to mutate its individual property, it won't trigger the setter. You have to explicitly assign the new value (like you have to do in Svelte.js).

//display 0123.... progressively with each click of button

export function Counter() {
  const count = useSignal([0]);
  const push = () => 
    count.mut = count.mut.concat(count.mut.length)

  return (<>
    <div>Counter: {count.mut}</div>
    <button onClick={push}>Increment</button>
</>);
}

For me, this is still a better mental model than default state-setState paradigm. I am pretty sure some Javascript wizard can use Proxy/Reflect to trigger setter for even changing individual indices of array. Do comment if you know how to. :)