ReactWrapper.js

import React, { useRef, useEffect } from 'react';

export default ({
  artifacts,
  width,
  height,
}) => {
  const root = useRef();
  const context = useRef();

  useEffect(() => {
    if (!context.current) {
      // initial mount
      // create d3 context here only when the input data is available
      // Render stuff inside the div you created
      // finally store it
      if (artifacts.length) {
        context.current = {
          chartApi: new D3BubbleChart(root.current, {
            width,
            height,
            artifacts
          })
        };
      }
    } else {
      // pass updates onto the d3 component
      context.current.chartApi.update({
        width,
        height,
        artifacts
      });
    }
  }, [artifacts, width, height]);

  return <div ref={root} />;
}