React hook for using a single ResizeObserver for multiple subscriptions

useResizeObserver.js

import React from 'react';
import ResizeObserver from 'resize-observer-polyfill';

let resizeObserver;
const subscriptions = {};

const onResizeCallback = elements => {
  elements.forEach(element => {
    const id = element.target.id;
    const callback = subscriptions[id] && subscriptions[id].callback;
    callback && callback(element);
  });
};

const getResizeObserver = () => {
  if (!resizeObserver) {
    resizeObserver = new ResizeObserver(onResizeCallback);
  }

  return resizeObserver;
};

const observe = (element, callback) => {
  if (!element.id) {
    console.error(
      'useResizeObserver: supplied element must have a unique id ',
      element,
    );
    return;
  }

  getResizeObserver().observe(element);
  subscriptions[element.id] = {
    callback,
    element,
  };
};

const unobserve = element => {
  getResizeObserver().unobserve(element);
  delete subscriptions[element.id];
};

const useResizeObserver = () => {
  return [observe, unobserve];
};

export default useResizeObserver;