React Alternative to Redux: useSyncExternalStore

Hello everyone Recently, I interviewed a few front-end developers and asked them this question:

“If you wanted to implement a state management system in pure React, what hooks would you use?”

Most mentioned Context API, useReducer, or useState — all solid answers, but not quite enough to create a true state management system like Redux. These tools work well for smaller apps, but they have some important limitations when it comes to scalability and predictable updates.

The real answer I was looking for is useSyncExternalStore — a built-in React hook designed for subscribing to external data sources.

This hook essentially implements the Observer Design Pattern:
components subscribe to a store, and whenever the store’s state changes, all subscribed components automatically re-render.

Here’s a simple example 👇

const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot);

And here’s a minimal implementation of the store:

let state = { counter: 0 };

export const store = {
    listeners: [],
    updateState(){
        state={...state};
    },
    increaseCount() {
        state.counter += 1;
        store.updateState();
        store.notify();
    },
    changeCounter(callBack) {
        if (typeof callBack == 'function') {
            state.counter = callBack(state.counter);
        } else {
            state.counter = callBack;
        }
        store.updateState();
        store.notify();
    },
    decreaseCount() {
        state.counter -= 1;
        store.updateState();
        store.notify();
    },
    subscribe(listener) {
        store.listeners.push(listener);
        return () => {
            store.listeners = store.listeners.filter(storeListener => storeListener != listener)
        }
    },
    getSnapshot() {
        return state;
    },
    notify() {
        store.listeners.forEach(listener => listener());
    }
}

This is a minimal example, but you can easily extend it to handle complex state logic, multiple slices, or middleware — all while keeping full control over your codebase.

If you’d like to dive deeper, check out the official React docs on useSyncExternalStore.

Thanks for reading, Would love to see your thoughts in the comments!