Transition to the New Version

[betula]

Hello everyone! I want to share my thoughts on transitioning to the new version.

You have all realized that React continues to obscure the internal API, and diving deeper into the reconciler is not very appealing. I feel like a hacker 😁😭. When I started writing this library, I thought about freedom, perfection, and code purity, about minimalism, and that's why use-between turned out great. I hoped the React team would notice and incorporate it into the standard React, but that hasn't happened.

I repeat that I don't want to be a hacker, to go against the system or comply with it. In such cases, I prefer to step out of the game.

Therefore, inspired by the recent dialogue with @bardak-dev, I want to propose a new syntax for use-between. Let's call it "Proposal 2.0".

import React, { useState, useCallback } from 'react';
import { between, Context } from 'use-between';

const useCounter = () => {
  const [count, setCount] = useState(0);
  const inc = useCallback(() => setCount(c => c + 1), []);
  const dec = useCallback(() => setCount(c => c - 1), []);
  return {
    count,
    inc,
    dec
  };
};

const useSharedCounter = between(useCounter);

const Count = () => {
  const { count } = useSharedCounter();
  return <p>{count}</p>;
};

const Buttons = () => {
  const { inc, dec } = useSharedCounter();
  return (
    <>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </>
  );
};

const App = () => (
  <Context>
    <Count />
    <Buttons />
    <Count />
    <Buttons />
  </Context>
);

export default App;

You may notice a few differences from the example on the main page of use-between, but there aren't many. In my opinion, it looks very concise and even better reflects the essence of what's happening.

Now useSharedCounter looks like a true service that is instantiated on demand and can be used in any number of places.

const useSharedCounter = between(useCounter);

Also, if you pay attention to the lower part of the code, you will see the emergence of the Context component. Yes, that's correct, this "Proposal 2.0" includes the ability to place the start of the context anywhere, as well as (drumroll) inside the React Router context 🚀, allowing the use of hooks that utilize useContext!

const App = () => (
  <Context>
    <Count />
    <Buttons />
    <Count />
    <Buttons />
  </Context>
);

Since this concept differs from what was originally embedded in use-between, I really need the support of my beloved and dear community. Please share your opinion, even if it seems insignificant to you; express it and don't just follow the evaluation of your own judgments! And if you feel your opinion is significant, then all the more reason to share it 🤗. Or simply, some kind words about use-between will be more valuable than gold to me as the author of use-between.

Please feel free to be yourself on this page.

Sincerely yours,
Slava

[nadav-zeira]

This feels like a very good direction for the library!
We use use-between in our project, and the lack of support of useContext() really limits our capabilities when I want to create some sort of mini-store for some shared state, requiring us to write boilerplate code; and even, in some files, ditch use-between entirely.
The support for React 19 is also, of course blessed as we plan to upgrade in the future as well.

I don't have any suggestions/ideas about making changes, the new syntax seems very concise and readable.
Maybe the only thing I would change is the naming of Context wrapper, as it's pretty generic, even though its different from native-react-context naming convetions.
I would suggest something like BetweenContext or SharedHookContext (but also would suggest asking AI for better options).

The only question that is left for me is - when are you planning to release the new version ?
Would love to hear updates, just recently learned you can "follow" GH repos, so I will do that.

Thanks in advance 🙏🏾🙏🏾🙏🏾

[davro33]

@betula any updates on how the new version is coming along?

[nadav-zeira]

@betula Any news?

[betula]

Hello everyone!
Exciting news.

Today I created a draft of the new version of use-between, but due to React's limitations, it has some differences from the original API as I mentioned earlier. It's unclear how to release it, but I'll think about it later.

Right now, anyone interested can check out the draft of the new version. It's quite close to the final solution, but there might be some bugs. So, you're welcome to take a look.

I'm interested in everyone's opinion!

import React, { Fragment, useState, useEffect, useRef, memo, MemoExoticComponent } from "react";

/**
 * Minimal class-based Event implementation using Set
 */
export class Event<T = void> {
  private listeners = new Set<(value: T) => void>();

  fire(value: T): void {
    for (const listener of this.listeners) {
      listener(value);
    }
  }

  subscribe(listener: (value: T) => void): () => void {
    this.listeners.add(listener);
    return () => {
      this.listeners.delete(listener);
    }
  }

  clear(): void {
    this.listeners.clear();
  }
}

/**
 * Minimal hook classes registry
 */
const hookClasses: HookClass[] = [];
const onHookClassesUpdated = new Event<void>();

/**
 * Symbol to store the cache
 */
const cacheSymbol = Symbol();

/**
 * Symbol to store the onRefresh event
 */
const onRefreshSymbol = Symbol();

/**
 * Symbol to store the last state
 */
const lastStateSymbol = Symbol();

/**
 * Symbol to store the id
 */
const idSymbol = Symbol();

/**
 * Hook class interface
 */
interface HookClass extends MemoExoticComponent<() => null> {
  [idSymbol]?: number;
  [lastStateSymbol]?: unknown;
  [onRefreshSymbol]?: Event<unknown>;
}

/**
 * Minimal shallow equal implementation
 */
export function shallowEqual(a: any, b: any) {
  if (a === b) return true;
  
  if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) {
    return false;
  }
  
  const keysA = Object.keys(a);
  const keysB = Object.keys(b);
  
  if (keysA.length !== keysB.length) return false;
  
  for (const key of keysA) {
    if (!Object.prototype.hasOwnProperty.call(b, key) || a[key] !== b[key]) {
      return false;
    }
  }
  
  return true;
}

/**
 * Minimal evruistic id generator
 */
function getNextHookClassId(): number {
  return hookClasses.length + 1;
}

/**
 * between hook factory
 */
export function between<T>(hookFn: () => T): () => T {
  const _hookFn = hookFn as (typeof hookFn & { [cacheSymbol]?: () => T });

  // Return the cached hook if it exists
  if (_hookFn[cacheSymbol]) {
    return _hookFn[cacheSymbol]!;
  }
  
  const Class: HookClass = memo(() => {
    const ref = useRef<any>(undefined);
    
    const nextState = _hookFn();

    if (!shallowEqual(ref.current, nextState)) {
      ref.current = nextState;
      Class[lastStateSymbol] = nextState;
      
      // Next tick for prevent calling setState of another component in the own render phase
      Promise.resolve().then(() => Class[onRefreshSymbol]!.fire(nextState));
    }

    return null;
  });
  Class[onRefreshSymbol] = new Event<unknown>();
  Class[idSymbol] = getNextHookClassId();

  hookClasses.push(Class);
  onHookClassesUpdated.fire();

  function hook(): T {
    const [value, setValue] = useState<T>(Class[lastStateSymbol] as T);
    useEffect(() => {
      return Class[onRefreshSymbol]!.subscribe(setValue as () => T);
    }, []);

    return value;
  }

  _hookFn[cacheSymbol] = hook;
  return hook;
}

/**
 * Executor component
 */
const Executor = memo(() => {
  const [classes, setClasses] = useState<HookClass[]>(hookClasses);
  
  useEffect(() => {
    return onHookClassesUpdated.subscribe(() => {
      setClasses(hookClasses.slice());
    });
  }, []);

  return <Fragment>
    {classes.map((Class: HookClass) => <Class key={Class[idSymbol]} />)}
  </Fragment>;
});

/**
 * Root context for the use-between app.
 * Hooks used between will obtain their own context from this place in your React hierarchy.
 * This means that we can now use the useContext hook inside hooks used between. 
 * Now, react-router-dom and much more will be available to you within the "use-between" hooks.
 */
export const Context = ({ children }: { children: React.ReactNode }) => {
  return <Fragment>
    <Executor />
    {children}
  </Fragment>
}

[betula]

Imagine you have a large office with many rooms (React components), and in each room people work with their own data. Normally in React, each "room" lives its own life, and if you need to pass information from one room to another, you have to run "wires" through all the walls (prop drilling) or use complex systems like Redux.

This code solves this problem in an elegant way! 🎯

How does it work?

The code creates something like a "magic radio" for your React application:

1. Event class — this is a radio station. It can broadcast messages (.fire()), and anyone can tune into its frequency (.subscribe()).

2. The between() function — this is the main magic! You give it a regular React hook, and it transforms it into a "shared hook" that different components can connect to simultaneously. They will all see the same data in real-time.

3. Executor — an invisible orchestra conductor. It monitors all "shared hooks" and updates them in the background.

4. Context — this is the "coverage area" of your magic radio. Inside this zone, all components can use the shared hooks.

Why is this needed?

Instead of passing data through dozens of components or setting up heavyweight state management systems, you simply wrap your hook in between() — and voilà! Any component can use this hook and receive up-to-date data automatically.

Real-life example: if one user changes the theme, all open application windows instantly switch — no manual synchronization needed! ✨

Here's how you could implement this with between():

import { useState } from "react";
import { between, Context } from "use-between-new";

// Create a shared theme hook
const useSharedTheme = between(() => {
  const [theme, setTheme] = useState('light');
  return { theme, setTheme };
});

// Now use it in any component!
function Header() {
  const { theme, setTheme } = useSharedTheme();
  
  return (
    <header className={theme}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </header>
  );
}

function Sidebar() {
  const { theme } = useSharedTheme();
  
  return <aside className={theme}>Sidebar content</aside>;
}

function Footer() {
  const { theme } = useSharedTheme();
  
  return <footer className={theme}>Footer content</footer>;
}

// Wrap your app with Context
function App() {
  return (
    <Context>
      <Header />
      <Sidebar />
      <Footer />
    </Context>
  );
}

When you click the button in Header, both Sidebar and Footer instantly update to the new theme — no props passed, no context provider boilerplate, no Redux store. Just simple, shared state! 🎨

The code uses memoization and optimizations so components only re-render when the data actually changes.

---

🔧 Under the Hood: How the Magic Actually Happens

Let's peek behind the curtain and see what makes this system tick!

The Caching System 🗄️

When you call between(hookFn) for the first time, the function checks if it's already been "converted" by looking for a special hidden property (cacheSymbol). Think of it like a secret stamp on a passport — if the stamp exists, we already processed this hook, so just return the cached version. This prevents creating duplicate "radio stations" for the same hook.

Symbols: The Secret Compartments 🔐

The code uses JavaScript Symbols (cacheSymbol, onRefreshSymbol, lastStateSymbol, idSymbol) — these are like invisible pockets where we store secret information without cluttering the visible properties. Each hook gets:

• An ID badge (idSymbol) — so React can track it
• An event emitter (onRefreshSymbol) — the actual radio transmitter
• Last known state (lastStateSymbol) — to avoid unnecessary updates

The Update Detection Dance 💃

Inside the between() function, a special memoized component continuously runs your hook. After each execution, it compares the new result with the previous one using shallowEqual() — a smart comparison that checks if object properties changed without deep-diving into nested structures (like checking if the room furniture moved, but not inspecting inside drawers).

If something changed: The component fires the event (onRefreshSymbol.fire()), which broadcasts to all subscribers "Hey! New data available!"

If nothing changed: No broadcasts, no re-renders. Energy saved! ⚡

The Subscription Model 📡

When a component uses your shared hook, it calls useState() to store the value and useEffect() to subscribe to updates. The subscription works like a newsletter:

• Component subscribes when it mounts
• Gets notified via setValue() when data changes
• Automatically unsubscribes when unmounting (cleanup function)

The Executor: Mission Control 🎮

The Executor component maintains a live list of all active shared hooks (hookClasses array). It listens to onHookClassesUpdated events and renders all hook components simultaneously. This ensures all hooks run on every React render cycle, keeping the shared state fresh.

When you add a new between() hook, it:

1. Gets pushed to the hookClasses registry
2. Triggers onHookClassesUpdated.fire()
3. Executor re-renders to include the new hook
4. Your shared state is now live! 🎉

Performance Optimizations 🚀

• memo() wraps components to prevent unnecessary re-renders
• Set data structure in Event class ensures O(1) add/remove operations for subscribers
• Shallow equality checks avoid deep comparisons that could slow things down
• Single Executor manages all hooks centrally, avoiding scattered update logic

The beauty is that this all happens automatically — you just wrap your hook and forget about the complexity!