title: My memory in three-fiber keeps adding up. How can I free up memory? How to delete past meshes, from memory, I don't use?
body: <p>In my application I create a 3d maze using a gridHelper and positioning cubes on top of the grid. I use each maze for a specific amount of time and after that I overwrite it by another one. My problem is from what I understand is that I don't dispose the previous meshes but I really don't know how. Bellow I display the code.
  I use React and three-fiber.</p>
  <pre><code>function PositionCube(x,y,len) {
      let x_start = -(len - 1)/2;
      let y_start = -(len - 1)/2;
      x += x_start
      y += y_start
      return(
          
          &lt;mesh position={[y, 0, x]} rotation={[0, 0, 0]} &gt;
          &lt;boxBufferGeometry 
              attach=&quot;geometry&quot; 
              args={[1, 0.5, 1]} 
          /&gt;
          &lt;meshStandardMaterial
              attach=&quot;material&quot;
              color=&quot;blue&quot;
              transparent
              roughness={1}
              metalness={5}
              opacity={0.8}
          /&gt;
          &lt;/mesh&gt;
      )
  }
  </code></pre>
  <p>This is how I position the cube on the grid</p>
  <pre><code>export default function NewGrid(props) {
      let rets = [];
      let len = props.maze.length;
      props.maze.map((row, i) =&gt; {
          row.map((col, j) =&gt; {
              if (col === 1) {
                  rets.push(PositionCube(i, j, props.maze.length))
              }
          })
      })
      console.log(rets);
      
      return (
          &lt;Canvas
              camera={{
              position: [0, 8, 0]
              }} frameloop=&quot;demand&quot;&gt;
              &lt;group dispose={null}&gt;
              &lt;gridHelper args={[props.maze.length, props.maze.length, `white`, `gray`]} /&gt;
              &lt;ambientLight intensity={2}/&gt;
              &lt;Suspense fallback={null}&gt;
              {rets}
              &lt;/Suspense&gt;
              &lt;EffectComposer multisampling={2}&gt;
          &lt;/EffectComposer&gt;
          &lt;/group&gt;
          &lt;/Canvas&gt;
          )
  }
  </code></pre>
  <p>This is how I display the cubes.
  In the props.maze I have a 2d list filled with 0s and 1s and when I find a 1 I display a cube on that position.
  What I want to do is before each new render (meaning a new maze) I want somehow to delete the previous one and free up the memory.
  Any ideas?
  Thanks &lt;3</p>