Hooks with Symbol keys

gistfile1.jsx

function StatusMessage() {
  const HOOK_WINDOW_WIDTH = Symbol("window-width");
  const HOOK_NETWORK_STATUS = Symbol("network-status");
  
  const width = useWindowWidth(HOOK_WINDOW_WIDTH);
  const isOnline = useNetworkStatus(HOOK_NETWORK_STATUS);
  return (
    <>
      <p>Window width is {width}</p>
      <p>You are {isOnline ? 'online' : 'offline'}</p>
    </>
  );
}

function useSubscription(key, subscribe, unsubscribe, getValue) {
  const [state, setState] = useState(key, getValue());  // assumes a new useState(symbol, value) interface
  useEffect(() => {
    const handleChange = () => setState(key, getValue());
    subscribe(handleChange);
    return () => unsubscribe(handleChange);
  });
  return state;
}

function useWindowWidth(key) {
  const width = useSubscription(key,
    handler => window.addEventListener('resize', handler),
    handler => window.removeEventListener('resize', handler),
    () => window.innerWidth
  );
  return width;
}

function useNetworkStatus(key) {
  const isOnline = useSubscription(key,
    handler => {
      window.addEventListener('online', handler);
      window.addEventListener('offline', handler);
    },
    handler => {
      window.removeEventListener('online', handler);
      window.removeEventListener('offline', handler);
    },
    () => navigator.onLine
  );
  return isOnline;
}

In response to https://news.ycombinator.com/item?id=18669483, I'm not interested in a big debate. It just struck me that flaws #3 and #4 could've been more robust if they didn't include this refactoring error.

Overall, I like the hooks system far more than the class system.