Passing Arc Data as prop to the globe doesn't work on remount

[rohanbhangui]

I have a globe that I am using with react-three-fiber.

I need more customization or I would have used the react-globe.gl package.

I have a globeComponent that I made react-three-fiber aware of. All it is, is a component that takes in some props (in this case the arcData). This data is consumed via a ref as shown below. My issue is when particularly when you remount the globe component, it does not render the Arcs.

const GlobeComponent = ({ transfers }) => {
  const globeRef = useRef<ThreeGlobe>();

  useEffect(() => {
    if(globeRef?.current) {
      // if i define transfers here it correctly remounts and renders the arcs
      globeRef.current.arcsData(transfers)
    }
  }, [globeRef.current])

  return (
    <threeGlobe ref={globeRef} />;
  )
}

If I use transfers where the the comment is, it works when remounting. I am trying to make sure that this GlobeComponent is strictly responsible for rendering the globe. Any ideas how I can get around this?

[vasturiano]

I think the reason behind this is that when you unmount and remount your component you're essentially instantiating a new Globe but not destroying nor cleaning up the data for the old one. This makes the new Globe think that the dataset is already attached to the Globe (it is still to the old one in fact), and bypasses it.

Are you able to invoke globe.arcsData([]) (cleans the dataset bindings) before letting go of the previous globe? And ideally globe._destructor() too, to liberate any memory associated to the internal geometries.

[rohanbhangui]

@vasturiano maybe do it in the useEffect clean up function before unmounting? I was also unaware of the _destructor method. Ill give that a whirl. Great project btw super cool stuff!

[rohanbhangui]

doesnt seem to show me an option for that method. Im using typescript so its complaining it doesn't exist

[vasturiano]

@rohanbhangui just added the type for the _destructor method.