[Refactor] Fix ESLint errors and performance warnings in Editor

[eloiberlinger1]

[Refactor] Fix ESLint errors and performance warnings in Editor

Context

Our recent CI/lint runs have identified several critical warnings and errors across the editor features. These range from simple formatting fixes to complex React lifecycle issues that could cause performance degradation (cascading renders) or stale state bugs.

Identified Issues

1. 🚀 Critical: Performance & Logic

• Cascading Renders (MainCanvas.tsx:226): We are calling setState synchronously inside a useEffect. This triggers double-renders and must be refactored (likely by moving logic to event handlers or using useMemo).
• Stale Closures / Missing Dependencies: Multiple files (EditorApp.tsx, MainCanvas.tsx) have useEffect hooks with missing dependencies. This leads to bugs where the editor doesn't react to state changes (like wallId or selectedObjId).
• Unnecessary Re-renders: holdModelsGLBURL in EditorApp.tsx needs to be wrapped in useMemo to prevent downstream effects from firing on every render.

2. 🛡️ Type Safety & Code Quality

• any Overuse: Extensive use of any in AddHoldModal.tsx, FileManager.tsx, and HoldInspector.tsx. These should be replaced with proper TypeScript interfaces (e.g., Hold, Wall, or Vector3).
• Const Correctness: Variables like parentQ and newId in MainCanvas.tsx are declared with let but never reassigned.

Checklist

EditorApp.tsx

• Add wallId to useEffect dependencies.
• Wrap holdModelsGLBURL in useMemo.
• Replace any type at line 96.

MainCanvas.tsx

• Fix cascading render at line 226 (remove synchronous setState from effect).
• Audit and fix all react-hooks/exhaustive-deps warnings.
• Convert parentQ and newId to const.
• Define types for any declarations.

Component Cleanup (Type Safety)

• AddHoldModal.tsx: Replace all 7 instances of any with specific types.
• FileManager.tsx: Define interfaces for file/metadata objects to replace any.
• HoldInspector.tsx: Define types for hold properties and transform data.

Files to touch

• frontend/src/features/editor/EditorApp.tsx
• frontend/src/features/editor/components/MainCanvas.tsx
• frontend/src/features/editor/components/AddHoldModal.tsx
• frontend/src/features/editor/components/FileManager.tsx
• frontend/src/features/editor/components/HoldInspector.tsx

How to verify

Run the following command in the frontend directory:

npm run lint

Any questions ?
https://discord.gg/BdyfNU9TpR