CodeForPhilly / CodeForPhilly/codeforphilly-ng

Cleaner slug-availability debounce pattern under react-hooks v7

Đang mở
#40 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
1
Fork
1
Merge trung bình
5 ngày 3 giờ
Pull request đã merge (30 ngày)
9

Mô tả

Follow-up from [#38](https://github.com/CodeForPhilly/codeforphilly-ng/pull/38) (authoring-screens).

In `apps/web/src/screens/ProjectEdit.tsx`, the debounced slug-availability check now sets `setSlugAvailability('checking')` *inside* the `setTimeout` callback rather than at the start of the effect. That's because eslint-plugin-react-hooks v7's `set-state-in-effect` rule flags every setState reachable from the effect body. The pattern still works, but the visual 'Checking…' indicator is delayed by the debounce (400ms) rather than appearing immediately after typing.

### Options

- Add a small `useDebounce` hook that owns its own state and emits a debounced value the effect can react to without setting state synchronously
- Use `useEffectEvent` (still experimental) once it lands stable
- Mark the early `setSlugAvailability('checking')` with a targeted `eslint-disable` if we decide the UX win is worth the rule exception

Either way, low-priority polish — the form is fully functional today.

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

Hướng nghiên cứu

Bắt đầu với apps/web/src/screens/ProjectEdit.tsx và ngữ cảnh liên quan trong pull request #38. So sánh các tùy chọn debounce, useEffectEvent và ngoại lệ quy tắc có mục tiêu được liệt kê, sau đó xác minh rằng cách tiếp cận được chọn vẫn giữ nguyên việc kiểm tra slug và làm cho chỉ báo “Checking…” xuất hiện ngay lập tức mà không tạo ra vi phạm lint của hooks.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react, typescript
Lĩnh vực
frontend, tooling
Loại issue
Tái cấu trúc
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
48/100

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.