Best way to handle CF with a react hooks

#1

Hi everyone I’m building a react application and I’m not quite sure how to organize/distribute CF within the application. I made it work in a simple way: I have all the aql declaration within a function. The function calls the .execute for each one of the visuals when the components are mounted.

The first clue that I’m not doing correctly is that I have some events attached to the visuals, and they are still fired if I go to a different route for example (using react-router), meaning that they are still there although the respective components aren’t.

I would like to know if you have a different approach for this.

#2

I don’t think you are doing wrong on how your code is distributed in the app. What I usually do is to have each visual declaration in a single file and export each one of them separately to be used after from the main component useEffect hook.

Now regarding to the events, it may be that you need to unsubscribe from the events first before the component is unmounted . So far the apps I have made are SPAs so no react-router.

#3

Thanks, @sandip, I tried that but still see some events being triggered, plus some visualizations complain that the element where they are hosted are not found. So I guess I need to do something else, maybe disable the visualization or put in on hold.

#4

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.

Error when applying filter in React application
#5

omg! thaaanks @gend_dev! Never crossed my mind to actually remove the visualization. I made it work by adding some state control variables, but this is so much better.