Cleaner slug-availability debounce pattern under react-hooks v7
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 48/100
- Issue type
- Refactor
- Clarity
- Needs clarification
- Activity status
- Quiet
- Tech stack
- react, typescript
Research direction
Start with apps/web/src/screens/ProjectEdit.tsx and the related context in pull request #38. Compare the listed debounce, useEffectEvent, and targeted rule-exception options, then verify the chosen approach preserves the slug check and makes the “Checking…” indicator appear immediately without introducing the hooks lint violation.
Written by the indexing model from the issue text.
Description
Follow-up from #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
useDebouncehook 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 targetedeslint-disableif we decide the UX win is worth the rule exception
Either way, low-priority polish — the form is fully functional today.
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 1
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 25
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from CodeForPhilly/codeforphilly-ng
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
MarkdownEditor toolbar: use Radix Toolbar from radix-ui instead of the hand-rolled roving tabindex Openenhancement
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
All issues in CodeForPhilly/codeforphilly-ng
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
mksglu/context-mode#1200 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
jaegertracing/jaeger-ui#4506 ·
-
area:desktop area:ui bug platform:macos
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
anthropics/claude-code#96687 ·
-
good first issue
Difficulty 1/5 Under an hour Newbie friendliness 95/100
AOSSIE-Org/DebateAI#582 · 2 comments ·