useBehaviorFrom.js

import React from "react";
import ReactDOM from "react-dom";

/* This hook is just a simple cache for computing initial state */
function useOnce(func) {
  const used = React.useRef("NOT_USED");

  if (used.current === "NOT_USED") {
    used.current = func();
  }

  return used.current;
}

/* used like useBehaviorFrom(<OnlineChecker />) */
export default function useBehaviorFrom(Component) {
  const instance = React.useRef(null);
  const originalSetState = React.useRef(null);

  // We are going to use this to update whenever
  // The component instance updates.
  const [_, _setState] = React.useState(
    useOnce(() => {
      const children = r => r;
      instance.current = new Component.type({
        children,
        ...Component.props
      });

      return instance.current.render();
    })
  );

  // Constructor, componentDidMount, bindings
  React.useLayoutEffect(() => {
    console.log("in uLE");
    originalSetState.current = instance.current.setState.bind(
      instance.current
    );
    instance.current.setState = (...args) => {
      _setState(...args);
      originalSetState.current(...args);
    };

    if (!instance.current.componentDidMount) {
      return;
    }

    instance.current.componentDidMount();
  }, []);

  console.log(instance.current.state, _);

  // Return the value of render.
  return instance.current.render();
}