CodeForPhilly / CodeForPhilly/codeforphilly-ng
Cleaner slug-availability debounce pattern under react-hooks v7
- 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