useRootClassList.js

// @flow

import { useLayoutEffect } from 'react';

const mountCountMap = new Map<string, number>();

const updateRootClassNameUsageCount = (className, setter: (count: number) => number) => {
  const oldCount = mountCountMap.get(className) || 0;
  const count = setter(oldCount);
  mountCountMap.set(className, count);

  if (!document.documentElement) return;
  if (count === 0) document.documentElement.classList.remove(className);
  if (count > 0) document.documentElement.classList.add(className);
};

export function useRootClassList(className: string = '') {
  useLayoutEffect(() => {
    updateRootClassNameUsageCount(className, count => count + 1);
    return () => updateRootClassNameUsageCount(className, count => count - 1);
  }, [className]);
}

export function UseRootClassListView({ className }: { className: string }) {
  useRootClassList(className);
  return null;
}