CodeForPhilly / CodeForPhilly/codeforphilly-ng

Cleaner slug-availability debounce pattern under react-hooks v7

未关闭
#40 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
1
派生
1
平均合并
5 天 3 小时
30 天内合并 PR
9

描述

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.

贡献指南

这个仓库没有索引到贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。