Best way to handle CF with a react hooks

I normally create a component per visualization and handle the visualization logic (aql) within the useEffect hook for that component. One thing I do is to remove the visualization when the component is unmounted:

useEffect(() => {
  // My aql here
  return () => { cf.remove('my-viz-id') }
}, [])

That ensures the visualization is fully removed and no events or process are pending around.