Optimization

About optimization

Library philosophy

ReactUse provides simple, predictable utility hooks. We do not add shared caches or cross-component optimizations by default. Optimization is a conscious, application-level decision, not something the library imposes on every user.

Why the library stays simple

"Premature optimization is the root of all evil" — Donald Knuth

The same principle applies here as with memoization: optimization should be applied when there is a real need, not by default.

Simple hooks are easier to reason about and debug — one subscription per hook instance, no hidden shared state.
Not every app needs one-listener-per-query — pushing shared stores into the library would add complexity for everyone, including those who do not need it.
Users who need shared or subscription optimizations can implement or wrap hooks in their application, or use helpers when appropriate.

Hooks that can be optimized

The library ships a straightforward useMediaQuery: each component that uses it gets its own matchMedia subscription and change listener. No shared cache.

Current implementation:

import { useCallback, useSyncExternalStore } from 'react';
 
const getServerSnapshot = () => false;
 
export const useMediaQuery = (query: string) => {
  const subscribe = useCallback(
    (callback: () => void) => {
      const matchMedia = window.matchMedia(query);
 
      // Each hook call gets its own listener
      matchMedia.addEventListener('change', callback);
      return () => {
        matchMedia.removeEventListener('change', callback);
      };
    },
    [query]
  );
 
  const getSnapshot = () => window.matchMedia(query).matches;
 
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
};

If you measure and find that many components use the same query and you want a single listener per query, you can do that in your application. A module-level cache of external stores, one MediaQueryList and one change listener per unique query.

Optimized variant:

import { useSyncExternalStore } from 'react';
 
const getServerSnapshot = () => false;
 
interface MediaQueryListExternalStore {
  getSnapshot: () => boolean;
  subscribe: (onStoreChange: () => void) => () => void;
}
 
const mediaQueryListExternalStore = new Map<string, MediaQueryListExternalStore>();
 
const createMediaQueryExternalStore = (query: string): MediaQueryListExternalStore => {
  const mediaQueryList = window.matchMedia(query);
  const listeners = new Set<() => void>();
  const onChange = () => listeners.forEach((listener) => listener());
 
  const store: MediaQueryListExternalStore = {
    subscribe: (onStoreChange) => {
      listeners.add(onStoreChange);
      if (listeners.size === 1) mediaQueryList.addEventListener('change', onChange);
      return () => {
        listeners.delete(onStoreChange);
        if (listeners.size === 0) {
          mediaQueryList.removeEventListener('change', onChange);
        }
      };
    },
    getSnapshot: () => mediaQueryList.matches
  };
  mediaQueryListExternalStore.set(query, store);
  return store;
};
 
const getMediaQueryExternalStore = (query: string) =>
  mediaQueryListExternalStore.get(query) ?? createMediaQueryExternalStore(query);
 
export const useMediaQuery = (query: string) => {
  const store = getMediaQueryExternalStore(query);
  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
};

The library keeps the simple version by design; the optimized version is something you can adopt in your codebase if it fits your needs.

createSharedHook

ReactUse also provides createSharedHook: a helper that creates one shared instance of a hook globally. The first subscriber's arguments are used; when the number of subscribers drops to zero, the internal runner unmounts.

import { createSharedHook, useMediaQuery } from '@siberiacancode/reactuse';
 
const useSharedMediaQuery = createSharedHook(useMediaQuery);
 
const First = () => {
  const matches = useSharedMediaQuery('(max-width: 768px)');
  return (
    <div>
      This is <code>{matches ? 'mobile' : 'desktop'}</code> screen
    </div>
  );
};
 
const Second = () => {
  const matches = useSharedMediaQuery('(max-width: 768px)');
  return (
    <div>
      This is <code>{matches ? 'mobile' : 'desktop'}</code> screen
    </div>
  );
};
 
const Demo = () => (
  <div>
    <First />
    <Second />
  </div>
);

Important: createSharedHook is experimental. It mounts an internal component in memory and has limitations: hook order is fixed, and the first subscriber's arguments are used for everyone. For production shared state, we recommend:

External stores + useSyncExternalStore — e.g. the optimized useMediaQuery pattern above, or your own store keyed by query or other arguments.
Dedicated state libraries — such as Zustand, Reatom, Effector, or similar — especially for complex shared state, as noted in the createSharedHook source.

Memoization Skills