React Three Fiber Optimization (geometry reusability)

I am making a game using React Three Fiber and I need to draw some squares around the canvas in the most optimal way.

I also use R3F-Perf for monitoring.

I have a Square.tsx file that gets imported in a Level.tsx file, which maps through an array containing the positions of the squares and places them inside the canvas.

Method 1

If I return this from Square.tsx

return (
    <>
      <mesh position={squarePosition}>
        <boxGeometry
          args={[squareDimensions.x, squareDimensions.y, squareDimensions.z]}
        />
        <meshStandardMaterial color={squareColor} />
      </mesh>
    </>
  );

and I map in Level.tsx

  const squaresMap = level.squaresMap;
  const Squares = squaresMap.flatMap((row, rowIndex) =>
    row.map(
      (value, columnIndex) =>
        value !== 0 && (
          <Square
            key={`${rowIndex}-${columnIndex}`}
            color={getSquareColor(value)}
            positionX={columnIndex}
            positionY={BOARD_HEIGHT}
            positionZ={rowIndex}
          />
        )
    )
  );

I can see in R3F-Perf that each square has its own geometry (37 geometries in total).

Method 2

If instead I pass the geometry of each square as a parameter, and return this from Square.tsx:

  return (
    <>
      <mesh position={squarePosition} geometry={geometry}>
        <meshStandardMaterial color={squareColor} />
      </mesh>
    </>
  );

And then in Level.tsx I create the geometry and then pass it as I map

  const squareGeometry = new THREE.BoxGeometry(
    BOARD_FACTOR * 0.95,
    0.45,
    BOARD_FACTOR * 0.95
  );

// Other code

  const Squares = squaresMap.flatMap((row, rowIndex) =>
    row.map(
      (value, columnIndex) =>
        value !== 0 && (
          <Square
            key={`${rowIndex}-${columnIndex}`}
            color={getSquareColor(value)}
            positionX={columnIndex}
            positionY={BOARD_HEIGHT}
            positionZ={rowIndex}
            geometry={squareGeometry}
          />
        )
    )
  );

I can see that one geometry is used for each square. (21 geometries in total).

BUT

The geometries in R3F-Perf keep increasing as the player moves. If the player moves by one square, the geometries count increases by 2. And this goes on and on forever. So, initially the geometries count is lower with this method, but then it keeps increasing.

I tried both methods, and I didn't obserbe a difference in performance or GPU usage between them.

So, I would like to ask which for the two methods is better in terms of performance/optimization. Any input more than welcome. Thanks!

If your squareGeometry is inside your component function body it will be remade on each re-rendering (twice if you have strict mode on).

I'd suggest to either have squareGeometry outside of your component function (if it is not expected to change), or use useMemo to memoize:

useMemo(() => new THREE.BoxGeometry(
   BOARD_FACTOR * 0.95,
   0.45,
   BOARD_FACTOR * 0.95
 ), [BOARD_FACTOR])

(have not tested it myself)

I think I found a solution, instead of creating the squareGeometry in the Level.tsx file and passing as a prop in the Level.tsx file, I created it in Square.tsx and I passed it as a prop in the Square.tsx file.

In this way, one geometry is used for all squares and the geometry count does not increase as the player moves, as the squares are not getting rerendered.

I will not accept my answer until I have more input from other users.