React hook get triggered on closing sidebar of streamlit when using React D3 component( https://github.com/andfanilo/streamlit-d3-demo)

user_12147051 0
Viewed 73

i am using useEffect hook to re-render graph when data is changed as shown below

const svgRef = useRef(null)
const { svgWidth, svgHeight, data, line_data, key }: PythonArgs = props.args

useEffect(() => {
       Chart()
       .container(svgRef.current)
       .data(data)
       .render()
   }, [])


   // Hook to update data
   useEffect(() => {
       Chart()
           .container(svgRef.current)
           .data(data)
           .render()
   },[data])

but whenever i click on close button the hook gets triggered.

Attached is the screenshot of sidebar.

Thanks

enter image description here

streamlit d3.js reactjs python javascript
1 Answers

Remove the first hook. Modify the second as following:

useEffect(() => {
  if (data && svgRef.current) {
    Chart().container(svgRef.current).data(data).render();
  }
},[data, svgRef]);

Does it help?

user_107564890
Related