Depurando esto

Los principiantes piensan que los desarrolladores experimentados no cometen errores.

La verdad es distinta.

Los desarrolladores experimentados simplemente encuentran y corrigen los errores más rápido.

Hace poco construí una aplicación de gestión de proyectos full-stack usando React, Zustand, Express, Prisma y PostgreSQL. Me encontré con docenas de pequeños errores. Estos errores me enseñaron cómo funcionan las aplicaciones frontend modernas.

Estas son las lecciones que aprendí:

  • React useEffect y Async No puedes pasar una función async directamente a useEffect. React espera una función de limpieza (cleanup function) o nada. Una función async devuelve una Promesa, lo que rompe esta regla. En su lugar, usa una función dentro del efecto.

  • La función olvidada Una vez escribí una función async dentro de un useEffect pero nunca la llamé realmente. El componente se montó, pero no pasó nada. A veces, los errores son simplemente llamadas a funciones que faltan.

  • Estructura de datos de Axios Axios devuelve un objeto. Tus datos residen dentro de response.data. Si intentas guardar toda la respuesta en tu estado, tu aplicación fallará.

  • Duplicación de URL Mi instancia de Axios tenía una URL base. Volví a añadir el prefijo de la API en mis peticiones. Esto creó rutas dobles como /api/api/projects. Revisa siempre tus abstracciones.

  • Errores de navegación El componente Navigate solo funciona durante el renderizado. Si quieres redirigir a un usuario después de un clic, usa el hook useNavigate en su lugar.

  • Contratos del backend Mi backend enviaba una propiedad llamada accessToken. Mi frontend buscaba una propiedad llamada token. Como los nombres no coincidían, mi estado de autenticación se quedaba como undefined. El frontend y el backend siempre deben usar los mismos nombres.

  • Problemas de sincronización Mi aplicación intentaba obtener las notificaciones antes de que el usuario iniciara sesión. Esto causó un error 401. La solución no fue dejar de buscar las notificaciones, sino verificar la autenticación antes de realizar la petición.

La lección más importante fue sobre mi flujo de trabajo. Deja de adivinar.

En su lugar, usa este proceso:

  • Revisa la consola del navegador.
  • Revisa la pestaña Network.
  • Inspecciona la respuesta de la API.
  • Verifica el contrato del backend.
  • Inspecciona tu estado.
  • Sigue el rastro de los datos desde la base de datos hasta la UI.

El software no se trata de escribir rápido. Se trata de entender cómo se mueven los datos. Los tutoriales te muestran el camino fácil. Los proyectos te enseñan el camino real.

Construye algo real. Los errores te enseñarán más que cualquier tutorial.

Fuente: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5