Tengo un proyecto en mi aplicación React que dibuja en el lienzo.

Lo estoy invocando en mi componente como:

 function CanvasProject() { const canvasRef = useRef(null); const cleanup = useRef(null); useEffect(() => { var c = canvasRef.current; const cleanup.current = render(c); }, []) return( <canvas style={{width: "100%"}} ref={canvasRef}> Your browser does not support the HTML5 canvas tag. Stop using Netscape. </canvas> ) }

La función de representación obtiene el contexto "2d" del lienzo varias veces, obtiene datos de imagen con ctx.createImageData y establece datos de imagen con ctx.putImageData .

render() también agrega un controlador onclick al lienzo, pero he intentado comentar ese código y la pérdida de memoria aún está presente.

En cuanto a la fuga de memoria en sí, cuando voy y vengo entre rutas en mi aplicación, comienza a ralentizar la página. Estoy yendo y viniendo entre rutas que respectivamente tienen y no tienen mi componente.

Intenté examinar el uso de la memoria con las herramientas de desarrollo de Firefox, y este es el perfil de la memoria cuando inicio la aplicación por primera vez:

Seguido por el uso de la memoria después de ir y venir entre algunas rutas:

Obviamente, sin ver el código completo, no espero una respuesta de "su error está aquí", pero ¿hay algo que deba considerar sobre la forma en que funciona la administración de memoria de canvas ? ¿Hay alguna otra herramienta de desarrollo que pueda usar para averiguar el origen de los grandes fragmentos de datos de Array y ArrayBuffer que se están generando? Básicamente busco pistas y una verificación de cordura, para asegurarme de que no me estoy perdiendo algo obvio.