yasr component is being duplicate while state change

[srinivasAarth]

I m really sorry for the basic question I'm expecting help for this issue I have been trying to solve this issue for 2 days but I'm unable to solve I'm using yasgui in react application this is the code im using for updating the yasr response result const [result , setResult] = React.useState([]) React.useEffect(( )=>{ var yasr = new YASR(document.getElementById("yasr"), { getUsedPrefixes: {}, drawOutputSelector: true, drawDownloadIcon: false, } yasr.setResponse({ data: result.data, contentType: "application/sparql-results+json", status: 200, executionTime: 1000, }); },[ result ]) how can we update the yasr results without rendering(duplicate) component while useState change I will close this issue soon if I have gotten any little help

[Chankami]

HI @srinivasAarth Can I know how you fix this issue . I'm facing the similar issue

[srinivasAarth]

I got you @Chankami There is a way just intially render your component inside the use effect with only empty dependancy along with assigning that component to one useRef

later if you want to update that component based on any variable Open one other useEffect with variable dependancy, take the asigned useRef here and update it

So it wont duplicate any more like document.createElement here is my stackoverflow question

https://stackoverflow.com/questions/74052501/component-is-being-duplicated-in-react

[Chankami]

@srinivasAarth Thank you !