En mi componente funcional, tengo una variable useState:
const [locations, setLocations] = React.useState([]); , estoy usando useEffect para crear un visor en un contenedor div, este visor cambia los valores de locations ,
useEffect(()=>{ const container = document.getElementById('viewer'); Viewer.setContainer(container); Viewer.onUpdate(locations => { setLocations(locations); }); } })Después de eso, muestro el Visor, así como los valores de ubicación en el retorno del componente:
return ( <Grid container> <Grid item xs={9}> <div id="viewer"/> </Grid> <Grid item container xs={3}> <Typography> X: {locations[0]} Y: {locations[1]} Z: {locations[2]} </Typography> </Grid> </Grid>);
En cada cambio de valores de ubicación, la página se vuelve a renderizar y el visor también se vuelve a renderizar, necesito una forma de no volver a renderizar el visor (la creación del visor está en useEffect) y simplemente actualice los valores de useState ( ubicaciones)
PD: Reduje el código para que sea más comprensible
Si pasa una matriz vacía como segundo parámetro en useEffect, el visor se renderizará cuando se monte por primera vez. Al omitir la matriz de dependencia, se volverá a procesar cada vez. Para obtener más información sobre React useEffect Hook: https://reactjs.org/docs/hooks-effect.html
useEffect(()=>{ const container = document.getElementById('viewer'); var child = container.lastElementChild; if (child) document.getElementById('viewer').removeChild(child); // deleting the viewer if it exists const element = document.createElement('div'); Viewer.setContainer(element); Viewer.onUpdate(locations => { setLocations(locations); }); }, [])