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
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.
Follow-up from #38 (authoring-screens).
In
apps/web/src/screens/ProjectEdit.tsx, the debounced slug-availability check now setssetSlugAvailability('checking')inside thesetTimeoutcallback rather than at the start of the effect. That's because eslint-plugin-react-hooks v7'sset-state-in-effectrule 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
useDebouncehook that owns its own state and emits a debounced value the effect can react to without setting state synchronouslyuseEffectEvent(still experimental) once it lands stablesetSlugAvailability('checking')with a targetedeslint-disableif we decide the UX win is worth the rule exceptionEither way, low-priority polish — the form is fully functional today.