As pointed out during community feedback, the current RoomEditorContext architecture forces all UI panel consumers to re-render whenever any global state property (layout, view, history, or gameMode) updates. While this isn't a bottleneck for the current scope because expensive sub-panels are conditionally unmounted behind tabs, it will degrade performance as the item catalog and UI complexity grow.
Migrating the state machine to Zustand will allow components to subscribe atomically to specific state slices, preventing unnecessary React DOM thrashing and removing provider wrapper boilerplate.
Proposed Changes:
Benefits:
Performance: Eliminates unnecessary re-renders across the 33+ UI panels.
Maintainability: Cleaner component tree with fewer context providers.
Ecosystem Alignment: Aligns the project with standard 3D/WebGl React state-management patterns.
As pointed out during community feedback, the current RoomEditorContext architecture forces all UI panel consumers to re-render whenever any global state property (layout, view, history, or gameMode) updates. While this isn't a bottleneck for the current scope because expensive sub-panels are conditionally unmounted behind tabs, it will degrade performance as the item catalog and UI complexity grow.
Migrating the state machine to Zustand will allow components to subscribe atomically to specific state slices, preventing unnecessary React DOM thrashing and removing provider wrapper boilerplate.
Proposed Changes:
Install zustand.
Extract useReducer action logic into an independent Zustand store slice.
Refactor UI panels to use selectors (e.g., const actions = useStore(state => state.actions)) so they only re-render when relevant state changes.
Ensure the store can be easily read outside the React lifecycle if high-frequency access inside the Three.js animation/interaction loop becomes necessary.
Benefits:
Performance: Eliminates unnecessary re-renders across the 33+ UI panels.
Maintainability: Cleaner component tree with fewer context providers.
Ecosystem Alignment: Aligns the project with standard 3D/WebGl React state-management patterns.