Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Cleaner slug-availability debounce pattern under react-hooks v7

Abierto
#40 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
48/100
Tipo de issue
Refactorización
Claridad
Necesita aclaración
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
frontend, tooling

Línea de trabajo

Empieza por apps/web/src/screens/ProjectEdit.tsx y el contexto relacionado en el pull request #38. Compara las opciones enumeradas de debounce, useEffectEvent y excepciones específicas de reglas, y luego verifica que el enfoque elegido conserve la comprobación del slug y haga aparecer inmediatamente el indicador “Checking…” sin introducir la violación del lint de hooks.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
1
Forks
1
Merge medio
1 d 20 h
PR fusionados (30 d)
25

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de CodeForPhilly/codeforphilly-ng

Todos los issues de CodeForPhilly/codeforphilly-ng

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.