Skip to content

fix: React Strict Mode white board bug (texture disposal)#718

Open
kdhoon723 wants to merge 1 commit intotscircuit:mainfrom
kdhoon723:fix/strict-mode-texture-disposal
Open

fix: React Strict Mode white board bug (texture disposal)#718
kdhoon723 wants to merge 1 commit intotscircuit:mainfrom
kdhoon723:fix/strict-mode-texture-disposal

Conversation

@kdhoon723
Copy link

Summary

  • Fixes white board rendering when React Strict Mode double-mounts the BoardMeshes component
  • Root cause: useMemo-created meshes were mutated by useEffect cleanup (material.map = null), so the second mount reused destroyed textures
  • Moved mesh creation from useMemo into useEffect bodies so each mount owns its own mesh instances
  • Removed the disposeMesh helper (no longer needed)

Changes

  • BoardMeshes now receives raw data props (geoms, textures, boardData, pcbThickness, isFauxBoard) instead of pre-built THREE.Mesh[] arrays
  • Each useEffect calls createGeometryMeshes() / createTextureMeshes() internally
  • Cleanup disposes only effect-owned resources (materials, PlaneGeometry) without touching shared state (BufferGeometry from geoms, CanvasTexture from textures)
  • Removed two useMemo hooks from CadViewerManifold that previously created meshes

Test plan

  • Fresh page load → 3D tab → green board renders
  • SCH → 3D → SCH → 3D (repeat) → green board every time
  • PCB → 3D → green board
  • Page refresh → 3D → green board
  • Layer visibility toggle works correctly

🤖 Generated with Claude Code

… Mode white board bug

The BoardMeshes component previously received pre-built meshes via useMemo.
The useEffect cleanup mutated these shared objects (setting material.map = null),
so when React Strict Mode re-mounted, the second mount reused meshes with
destroyed textures, rendering a white board.

Now each useEffect creates its own mesh instances internally, so cleanup
only disposes resources owned by that specific effect invocation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link

vercel bot commented Mar 3, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
3d-viewer Ready Ready Preview, Comment Mar 3, 2026 3:25am

Request Review

if (!rootObject || !geoms) return

geometryMeshes.forEach((mesh) => {
const meshes = createGeometryMeshes(geoms)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing import for createGeometryMeshes function

The function createGeometryMeshes() is called but never imported. Only createTextureMeshes is imported from "./textures" (line 14). This will cause a runtime error:

ReferenceError: createGeometryMeshes is not defined

Fix: Add the import alongside the existing createTextureMeshes import:

import { createTextureMeshes, createGeometryMeshes } from "./textures"

Or import from the appropriate module where createGeometryMeshes is defined.

Spotted by Graphite

Fix in Graphite


Is this helpful? React 👍 or 👎 to let us know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant