Reglas mentales y buenas prácticas

Llegados aquí, ya conoces las piezas. Lo que marca la diferencia es cómo decides usarlas.

Regla 1: modela la UI desde los datos

Antes de escribir componentes, piensa:

• qué datos tengo
• qué partes de la UI dependen de esos datos
• qué cambia
• quién necesita saberlo

React se vuelve mucho más simple cuando el árbol de componentes nace de esa lógica.

Regla 2: el estado mínimo posible

Guarda en estado solo lo imprescindible.

Si puedes derivarlo de props o de otro estado, calcúlalo durante el render.

Regla 3: un componente, una responsabilidad

Si un componente:

• pide datos
• filtra
• transforma
• valida
• renderiza
• maneja un modal

entonces seguramente hace demasiado.

Regla 4: los efectos son excepción, no norma

Si puedes resolverlo sin useEffect, mejor.

Eso suele significar menos bugs, menos estados duplicados y menos sincronización manual.

Regla 5: nombres claros

Buenos nombres reducen fricción:

• isLoading
• selectedUser
• handleSubmit
• onClose

Nombres ambiguos suelen esconder diseño ambiguo.

Errores comunes de principiante

• mutar arrays u objetos del estado
• usar índice como key en listas dinámicas
• duplicar estado derivado
• meter toda la lógica en App
• usar efectos para cálculos normales

Qué sigue después

Con esta base ya puedes entrar con criterio en:

• enrutado
• fetch de datos
• manejo de estado más complejo
• frameworks como Next.js
• testing de componentes

Y, sobre todo, ya puedes distinguir entre usar React y pelearte con React.