aafre / aafre/resume-builder

perf(editor): apply useRef pattern to useUnifiedDragDrop callbacks for stable references

Đang mở
#247 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
enhancement good first issue performance
Ngôn ngữ chính
TypeScript
Star
6
Fork
15
Merge trung bình
7 ngày 22 giờ
Pull request đã merge (30 ngày)
2

Mô tả

## 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`

1. Add a `sectionsRef` using `useRef` near the top of the hook:
```ts
const sectionsRef = useRef(sections);
sectionsRef.current = sections;

2. Replace direct sections usage inside handleDragStart and handleDragEnd with sectionsRef.current.
3. 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)

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.