Buenas Prácticas de Patrones de Componentes
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
Nombra la división entre pantalla y presenter: La pantalla (container) es propietaria de los datos, navegación y efectos secundarios; el presenter renderiza solo props - si no puedes probar la UI sin simular fetch, el límite es incorrecto.
Co-ubica por feature, no por tipo: Mantén features/orders/screens, hooks y components juntos - un vertedero global components/ se convierte en un cementerio de wrappers de un solo uso.
Una exportación pública por feature: Expone OrdersScreen desde features/orders/index.ts - los archivos de ruta importan un símbolo; los internos permanecen privados en la carpeta.
Extrae hooks de UI antes del tercer useState: El estado abierto del modal, los toggles de divulgación y los chips de filtro pertenecen a useDisclosure / useFilters - no veinte llamadas useState en la parte superior de una pantalla.
Mantén los hooks de datos separados de los hooks de UI: useOrdersQuery obtiene datos; useOrderFilters da forma a la UI - mezclarlos hace que los hooks sean no probables y sobre-obtienen datos en toggles no relacionados.
Usa componentes compuestos para UI de varias partes: Las pestañas, acordeones y grupos de campos comparten estado implícito a través del contexto - el prop-drilling de selectedIndex a través de cuatro capas es un costo de mantenimiento.
Expone métodos de intención en APIs compuestas: Exporta selectTab(id) en lugar de setIndex crudo - las pantallas no deben eludir la validación o los hooks de análisis conectados dentro de la raíz compuesta.
Recurre a render props cuando los hijos necesiten datos que el padre posee: Los estados vacíos de la lista y los esqueletos de fila son ranuras render-prop clásicas - evita clonar al padre solo para leer su estado.
Usa Expo Router <Slot /> para carcasas de diseño: Los patrones de Slot aplanan árboles de navegación profundos sin infierno de wrappers - el diseño es propietario de chrome; las rutas hoja son propietarias del contenido.
El nombre container/presenter es documentación: Sufijo OrdersScreen + OrdersView (o OrdersPresenter) para que los revisores sepan al instante qué archivo puede llamar a fetch o router.push.
Prueba presenters con props simples: Los presenters deben renderizarse desde un objeto props sin proveedores - las pruebas de snapshot e interacción se ejecutan en milisegundos sin MSW.
Los primitivos headless devuelven comportamiento, no estilos: useDisclosure exporta bolsas triggerProps y contentProps - la salida pre-diseñada en el primitivo acopla cada consumidor a tus tokens de diseño.
Refleja el estado visual en props de accesibilidad: Las pestañas seleccionadas y los acordeones expandidos deben establecer accessibilityState y accessibilityRole - VoiceOver no lee tu CSS.
Memoiza bolsas de props de accesibilidad: Reconstruir { onPress, accessibilityRole, ... } en línea en cada renderizado anula memo en filas de lista - useMemo codificado en open / selected.
Nunca llames a hooks dentro de render props: children={() => useFoo()} viola las Reglas de Hooks - extrae un componente hijo nombrado o llama al hook en el padre.
Usa as polimórfico con genéricos: BoxProps<E extends ElementType> preserva la escritura href vs onPress - ElementType desnudo borra el contrato del host.
Prefiere asChild sobre touchables anidados: Fusionar props en Expo Router Link evita árboles Pressable > Link inválidos y corrige el orden de enfoque en objetivos web.
Aplica un solo hijo para asChild: Children.only falla rápidamente cuando los diseñadores envuelven dos nodos - documenta la restricción en ejemplos de Storybook.
Encadena manejadores onPress deliberadamente: El padre e hijo se disparan de forma predeterminada - documenta la precedencia cuando la navegación debe tragarse el manejador del padre.
Divide pantallas god a 300 líneas, no 2000: Extrae presenters y hooks incrementalmente - esperar hasta que un archivo sea inmanejable garantiza un refactor de big-bang arriesgado.
Mueve FlatList renderItem a un componente de fila memoizado: Los cierres renderItem de 200 líneas en línea se recrean en cada renderizado del padre y bloquean las ganancias de virtualización.
Valida parámetros de ruta en el container: Las pantallas god se ramifican en doce parámetros de cadena cruda - analiza useLocalSearchParams con Zod en el contenedor de pantalla antes de pasar props escritos hacia abajo.
Mantén los switches de plataforma en presenters o tokens: Los ternarios Platform.OS repetidos a través de JSX señalan una división de presenter faltante o una variante del sistema de diseño.
Reserva almacenes globales para el estado entre rutas: El estado abierto de bottom-sheet para una pantalla no pertenece a Zustand - el estado local o un contexto de alcance de feature es suficiente.
Prueba unitariamente hooks headless, snapshot una skin: Prueba el comportamiento de useDisclosure en aislamiento; integración-prueba un único componente de referencia estilizado - no cada árbol de marcado del consumidor.
Tabs.List, Tabs.Panel) que deben mantenerse sincronizadas.Pressable, lo que rompe la semántica del link y las reglas de anidamiento.*View con props escritos.router.push en el archivo de pantalla hasta que la vista se estabilice.app/ se mantienen delgadas - importa FeatureScreen desde features/ y renderla.Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0 y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 16 jul 2026