Summary
The useUnifiedDragDrop hook in resume-builder-ui/src/hooks/editor/useUnifiedDragDrop.ts includes sections in the dependency array of handleDragEnd (line 381), which causes the callback to be recreated every time the sections array changes. This can be avoided by using the same useRef pattern already applied in
useSectionManagement.
Context
In a prior PR (#244), we optimized useSectionManagement by storing sections in a useRef and reading from ref.current inside useCallback, allowing callbacks to remain stable across re-renders. The same pattern was not applied to useUnifiedDragDrop.
While the performance impact is low (drag handlers fire infrequently), applying the pattern here improves consistency and prevents DndContext from receiving new function props on every sections change.
What to change
File: resume-builder-ui/src/hooks/editor/useUnifiedDragDrop.ts
- Add a
sectionsRef using useRef near the top of the hook:
const sectionsRef = useRef(sections);
sectionsRef.current = sections;
- Replace direct sections usage inside handleDragStart and handleDragEnd with sectionsRef.current.
- Remove sections from the dependency array of handleDragEnd:
// Before
[setSections, sections]
// After
[setSections]
Reference implementation
See useSectionManagement.ts for the existing pattern to follow.
Acceptance criteria
- sectionsRef is added and kept in sync
- handleDragStart and handleDragEnd use sectionsRef.current instead of sections
- sections is removed from useCallback dependency arrays
- Drag-and-drop for sections, items, and subitems still works correctly
- Existing tests pass (npm test)
Summary
The
useUnifiedDragDrophook inresume-builder-ui/src/hooks/editor/useUnifiedDragDrop.tsincludessectionsin the dependency array ofhandleDragEnd(line 381), which causes the callback to be recreated every time the sections array changes. This can be avoided by using the sameuseRefpattern already applied inuseSectionManagement.Context
In a prior PR (#244), we optimized
useSectionManagementby storingsectionsin auseRefand reading fromref.currentinsideuseCallback, allowing callbacks to remain stable across re-renders. The same pattern was not applied touseUnifiedDragDrop.While the performance impact is low (drag handlers fire infrequently), applying the pattern here improves consistency and prevents
DndContextfrom receiving new function props on every sections change.What to change
File:
resume-builder-ui/src/hooks/editor/useUnifiedDragDrop.tssectionsRefusinguseRefnear the top of the hook:// Before
[setSections, sections]
// After
[setSections]
Reference implementation
See useSectionManagement.ts for the existing pattern to follow.
Acceptance criteria