Patrones de Render Props y Slots

Q: ¿Qué es un render prop?

Una prop (a menudo children) cuyo valor es una función que devuelve elementos React. El componente padre llama la función con su estado interno. El llamador decide qué primitivas nativas renderizar.

Q: ¿En qué se diferencia Slot de children en un layout?

children en React clásico son elementos pasados por el padre directo. renderiza la ruta secundaria coincidente del enrutador - no JSX pasado manualmente. Expo Router conecta el slot al sistema de archivos bajo el directorio del layout.

Q: Error común: ¿Puedo usar hooks dentro de un callback de render prop?

No - el callback no es un cuerpo de componente. Devuelve desde el callback y llama hooks dentro de MyRow. Misma regla que FlatList renderItem.

Q: Render props vs componentes compuestos - ¿Cuál gana para pestañas?

Compound cuando tu sistema de diseño envía Tabs.List / Tabs.Tab y los equipos reutilizan esa estructura. Render props cuando cada pantalla del producto distribuye las pestañas de manera diferente (inferior vs control segmentado). Híbrido: partes compuestas internamente, anulación renderTab opcional para casos avanzados.

Q: ¿Usa FlatList un render prop?

Sí - renderItem, ListHeaderComponent y ListEmptyComponent son todos APIs de estilo de renderizado. ListEmptyComponent puede ser un tipo de componente o una función que devuelve JSX. Trata las filas de la lista como componentes de primera clase para hooks y memoización.

Q: ¿Cómo interactúan los slots con los navegadores Stack?

Un _layout.tsx puede renderizar para encabezados y aún usar en layouts anidados de estilo pestaña. Stack.Screen options en layouts establece configuración de encabezado compartida para rutas secundarias. Los enlaces profundos apuntan a rutas secundarias; el slot de layout se actualiza automáticamente.

Los patrones de render props y slots dejan que los padres posean el comportamiento mientras que los hijos son dueños del markup - así compones árboles de navegación profunda sin apilar componentes wrapper alrededor de cada pantalla. Los render props pasan estado a través de una función; los patrones de slot (como en layouts de Expo Router) reservan un espacio donde se renderiza la ruta secundaria activa.

Receta

Tarjeta de receta de referencia rápida - lista para copiar y pegar.

import type { ReactNode } from "react";
import { useCallback, useState } from "react";
import { Pressable, Text, View } from "react-native";
 
interface ToggleRenderProps {
  isOn: boolean;
  toggle: () => void;
}
 
interface ToggleProps {
  initial?: boolean;
  children: (state: ToggleRenderProps) => ReactNode;
}
 
export function Toggle({ initial = false, children }: ToggleProps) {
  const [isOn, setIsOn] = useState(initial);
  const toggle = useCallback(() => setIsOn((v) => !v), []);
  return <>{children({ isOn, toggle })}</>;
}
 
// El llamador pinta la UI - no requiere exportación Toggle.Button
export function NotificationRow() {
  return (
    <Toggle initial={true}>
      {({ isOn, toggle }) => (
        <Pressable onPress={toggle} style={{ flexDirection: "row", gap: 8 }}>
          <Text>Push alerts</Text>
          <Text>{isOn ? "On" : "Off"}</Text>
        </Pressable>
      )}
    </Toggle>
  );
}

Cuándo usar esto:

Un padre es dueño del estado o suscripciones pero los equipos de producto deben controlar el layout (listas, filas de configuración)
Los layouts de Expo Router / React Navigation necesitan una salida única para rutas anidadas (<Slot />)
Quieres evitar exportar cinco sub-componentes con estilo para un pequeño comportamiento
Las bibliotecas de terceros exponen children como una función (APIs estilo KeyboardAvoidingView)
Los árboles de navegadores profundos sufren del "infierno de wrappers" - cinco HOCs antes de la pantalla actual

Ejemplo de Trabajo

import type { ReactNode } from "react";
import { useCallback, useEffect, useState } from "react";
import {
  ActivityIndicator,
  FlatList,
  Pressable,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { Stack, Slot } from "expo-router";
 
interface AsyncState<T> {
  status: "idle" | "loading" | "success" | "error";
  data: T | null;
  error: string | null;
}
 
interface AsyncListProps<T> {
  load: () => Promise<T[]>;
  keyExtractor: (item: T) => string;
  children: (ctx: {
    items: T[];
    status: AsyncState<T[]>["status"];
    error: string | null;
    reload: () => void;
  }) => ReactNode;
}
 
function AsyncList<T>({ load, keyExtractor, children }: AsyncListProps<T>) {
  const [state, setState] = useState<AsyncState<T[]>>({
    status: "idle",
    data: null,
    error: null,
  });
 
  const reload = useCallback(async () => {
    setState((prev) => ({ status: "loading", data: prev.data, error: null }));
    try {
      const data = await load();
      setState({ status: "success", data, error: null });
    } catch (e) {
      setState({
        status: "error",
        data: null,
        error: e instanceof Error ? e.message : "Request failed",
      });
    }
  }, [load]);
 
  useEffect(() => {
    void reload();
  }, [reload]);
 
  const items = state.data ?? [];
 
  return (
    <View style={{ flex: 1 }}>
      {children({
        items,
        status: state.status,
        error: state.error,
        reload,
      })}
    </View>
  );
}
 
interface InboxItem {
  id: string;
  subject: string;
  unread: boolean;
}
 
const MOCK: InboxItem[] = [
  { id: "1", subject: "Release train Friday", unread: true },
  { id: "2", subject: "Design review notes", unread: false },
  { id: "3", subject: "Crash-free rate 99.2%", unread: true },
];
 
function InboxListUI({
  items,
  status,
  error,
  reload,
}: {
  items: InboxItem[];
  status: AsyncState<InboxItem[]>["status"];
  error: string | null;
  reload: () => void;
}) {
  if (status === "loading" && items.length === 0) {
    return <ActivityIndicator style={{ marginTop: 32 }} />;
  }
 
  if (status === "error") {
    return (
      <View style={styles.center}>
        <Text style={styles.error}>{error}</Text>
        <Pressable onPress={reload} style={styles.retry}>
          <Text style={styles.retryText}>Retry</Text>
        </Pressable>
      </View>
    );
  }
 
  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={[styles.row, item.unread && styles.unread]}>
          <Text style={styles.subject}>{item.subject}</Text>
          {item.unread ? <Text style={styles.dot}>•</Text> : null}
        </View>
      )}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      contentContainerStyle={styles.list}
    />
  );
}
 
export function InboxScreen() {
  const loadInbox = useCallback(
    () => new Promise<InboxItem[]>((r) => setTimeout(() => r(MOCK), 500)),
    []
  );
 
  return (
    <AsyncList load={loadInbox} keyExtractor={(item) => item.id}>
      {(ctx) => <InboxListUI {...ctx} />}
    </AsyncList>
  );
}
 
// Layout de Expo Router - el slot evita envolver manualmente cada pantalla secundaria
export function InboxLayout() {
  return (
    <View style={styles.layout}>
      <Stack.Screen options={{ title: "Inbox" }} />
      <View style={styles.banner}>
        <Text style={styles.bannerText}>Team mobile updates</Text>
      </View>
      <View style={styles.slot}>
        <Slot />
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  layout: { flex: 1, backgroundColor: "#f8fafc" },
  banner: {
    backgroundColor: "#0f172a",
    paddingHorizontal: 16,
    paddingVertical: 10,
  },
  bannerText: { color: "#fff", fontWeight: "600" },
  slot: { flex: 1 },
  list: { padding: 16 },
  row: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#fff",
    padding: 14,
    borderRadius: 10,
  },
  unread: { borderLeftWidth: 3, borderLeftColor: "#2563eb" },
  subject: { flex: 1, fontSize: 16, color: "#0f172a" },
  dot: { color: "#2563eb", fontSize: 20, lineHeight: 20 },
  separator: { height: 8 },
  center: { flex: 1, alignItems: "center", justifyContent: "center", gap: 12 },
  error: { color: "#dc2626", fontSize: 15 },
  retry: {
    backgroundColor: "#2563eb",
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 8,
  },
  retryText: { color: "#fff", fontWeight: "600" },
});

Lo que esto demuestra:

AsyncList es dueño del estado de fetch; el render prop pinta la UI de carga, error y FlatList
Los genéricos preservan el tipo InboxItem a través del callback de renderizado - sin any en renderItem
InboxLayout usa <Slot /> de Expo Router para que las rutas secundarias se rendericen sin wrappers por pantalla
El componente de comportamiento (AsyncList) se mantiene libre de estilos de marca; el componente UI (InboxListUI) se mantiene libre de lógica de fetch
Un archivo de layout agrega chrome de banner alrededor de cada ruta secundaria de inbox

Inmersión Profunda

Cómo Funciona

Render prop - children (o una prop nombrada como renderItem) es una función que el padre llama con estado: children({ isOn, toggle }).
El padre renderiza <> {children(state)} </> - no elige cuál Pressable o Text mostrar.
Patrón de slot - un layout renderiza chrome compartido e inserta <Slot /> donde el componente de la ruta secundaria coincidente debe aparecer.
Expo Router resuelve el hijo activo desde la URL; el layout no importa archivos de pantalla directamente.
Ambos patrones invierten el control: la biblioteca es dueña de la lógica; la aplicación es dueña de la estructura y el estilo.
La navegación profunda se beneficia porque los layouts reemplazan pilas de wrappers HOC (withAuth(withTheme(Screen)))

Render Prop vs Compound vs Hook

Patrón	El llamador proporciona	El padre proporciona	Mejor en móvil cuando
Render prop	Función que devuelve JSX	Estado + callbacks	Layouts únicos, personalización de fila de lista
Compound	Hijos JSX nombrados	Context + sub-partes	Pestañas del sistema de diseño, acordeón, campos
Custom hook	El cuerpo del componente llama `useX()`	Estado/acciones devueltos	Misma lógica, árboles totalmente diferentes
Slot (`<Slot />`)	Archivos de ruta secundaria	Chrome de layout	Expo Router / anidación basada en archivos

Layout de Slot de Expo Router

// app/(app)/settings/_layout.tsx
import { Stack, Slot } from "expo-router";
import { View, Text } from "react-native";
 
export default function SettingsLayout() {
  return (
    <View style={{ flex: 1 }}>
      <Stack.Screen options={{ headerShown: false }} />
      <Text style={{ padding: 16, fontWeight: "700" }}>Settings</Text>
      <Slot />
    </View>
  );
}

Slot renderiza la ruta secundaria activa - análogo a children en un componente de layout.
Usa archivos _layout.tsx anidados en lugar de componer manualmente navegadores en cada pantalla.
Empareja con rutas tipadas - ver Expo Router Typed Routes.

Render Props de Lista y Rendimiento

<FlatList
  data={items}
  renderItem={({ item }) => (
    <UserRow item={item} onPress={handlePress} />
  )}
/>

renderItem es un render prop construido en listas de React Native.
Extrae UserRow como un componente memoizado - no llames hooks dentro de renderItem.
Estabiliza handlePress con useCallback para que la memoización de fila funcione.

Notas de TypeScript

import type { ReactNode } from "react";
 
type RenderProp<T> = (value: T) => ReactNode;
 
interface DataRendererProps<T> {
  data: T;
  children: RenderProp<T>;
}
 
// Render prop nombrado cuando children ya se usa para composición
interface ListProps<T> {
  items: T[];
  renderRow: RenderProp<{ item: T; index: number }>;
  keyExtractor: (item: T) => string;
}

Prefiere nombres explícitos (renderHeader, renderEmpty) cuando children también es un nodo React válido.
Los padres genéricos (AsyncList<T>) mantienen los tipos de elemento fluyendo hacia el parámetro de callback.
Escribe el argumento de renderizado como una interfaz para que las pantallas obtengan autocompletado en reload, status, etc.

Errores comunes

Funciones de renderizado en línea en listas - children={(ctx) => <Row {...ctx} />} definida dentro de un padre recrea la función en cada renderizado y puede derrotar memo. Solución: Eleva un componente hijo estable o pasa renderRow desde useCallback.
Infierno de wrappers en navegadores - Anidar cinco proveedores en cada _layout.tsx oscurece la pantalla real. Solución: Empuja proveedores transversales al layout raíz; usa slots solo para chrome de nivel de ruta.
Usar render props cuando un hook es suficiente - Toggle con solo isOn/toggle no necesita un hijo de función si cada llamador renderiza la misma fila. Solución: Exporta useToggle y una fila tonta - ver Custom Hooks for UI Logic.
Llamar hooks dentro de render props - children={() => { const x = useFoo(); ... }} viola las Reglas de Hooks. Solución: Mueve las llamadas de hook a un componente hijo renderizado por la función.
Slot sin flex - Olvidar flex: 1 en el contenedor de slot produce pantallas secundarias en blanco o recortadas. Solución: Da al wrapper de slot flex: 1 en layouts de pantalla completa.
Bucles de recarga de render prop asincrónico - useEffect(() => reload(), [items]) cuando reload establece items causa una búsqueda infinita. Solución: Depende de claves estables; carga una vez en mount o en acciones de usuario explícitas.
children sin tipo como Función - children: Function pierde la seguridad de tipos. Solución: children: (state: ToggleRenderProps) => ReactNode.

Alternativas

Alternativa	Usar Cuando	No Usar Cuando
Render props	El llamador debe poseer todo el markup; pocas convenciones estructurales	El equipo prefiere sub-partes compuestas consistentes
Componentes compuestos	UI de múltiples partes repetidas (pestañas, campos)	Solo un layout consume el comportamiento
Hooks personalizados	Estado idéntico, árboles JSX arbitrarios	Necesitas un único límite de componente para límites de error
Expo Router `<Slot />`	Rutas secundarias basadas en archivos bajo chrome compartido	Superposiciones modales que no son rutas
HOCs (`withTheme`)	Base de código heredada ya estandarizada en ellos	Greenfield - layouts + hooks son más claros
Hijos JSX en línea	Composición estática, sin función de estado compartida	El padre debe inyectar estado dinámico en el hijo

Preguntas Frecuentes

¿Qué es un render prop?

Una prop (a menudo children) cuyo valor es una función que devuelve elementos React.
El componente padre llama la función con su estado interno.
El llamador decide qué primitivas nativas renderizar.

¿En qué se diferencia Slot de children en un layout?

children en React clásico son elementos pasados por el padre directo.
<Slot /> renderiza la ruta secundaria coincidente del enrutador - no JSX pasado manualmente.
Expo Router conecta el slot al sistema de archivos bajo el directorio del layout.

¿Por qué ocurre el infierno de wrappers en la navegación?

Cada preocupación (auth, theme, analytics, safe area) agrega una capa de layout u HOC.
Sin slots, cada ruta de importación de pantalla crece y el chrome compartido se duplica.
Los layouts raíz + grupo deben poseer proveedores; los layouts de hoja poseen solo chrome local.

Error común: ¿Puedo usar hooks dentro de un callback de render prop?

No - el callback no es un cuerpo de componente.
Devuelve <MyRow /> desde el callback y llama hooks dentro de MyRow.
Misma regla que FlatList renderItem.

Render props vs componentes compuestos - ¿Cuál gana para pestañas?

Compound cuando tu sistema de diseño envía Tabs.List / Tabs.Tab y los equipos reutilizan esa estructura.
Render props cuando cada pantalla del producto distribuye las pestañas de manera diferente (inferior vs control segmentado).
Híbrido: partes compuestas internamente, anulación renderTab opcional para casos avanzados.

¿Cómo evito recrear funciones de renderizado?

function InboxBody(props: InboxRenderProps) {
  return <InboxListUI {...props} />;
}
 
<AsyncList load={loadInbox} keyExtractor={(i) => i.id}>
  {InboxBody}
</AsyncList>

Pasa una referencia de función estable en lugar de una flecha en línea en JSX.
O envuelve con useCallback cuando la función cierra sobre props.

¿Usa FlatList un render prop?

Sí - renderItem, ListHeaderComponent y ListEmptyComponent son todos APIs de estilo de renderizado.
ListEmptyComponent puede ser un tipo de componente o una función que devuelve JSX.
Trata las filas de la lista como componentes de primera clase para hooks y memoización.

¿Cómo interactúan los slots con los navegadores Stack?

Un _layout.tsx puede renderizar <Stack /> para encabezados y aún usar <Slot /> en layouts anidados de estilo pestaña.
Stack.Screen options en layouts establece configuración de encabezado compartida para rutas secundarias.
Los enlaces profundos apuntan a rutas secundarias; el slot de layout se actualiza automáticamente.

Error común: ¿Pantalla en blanco debajo de mi banner de layout?

El contenedor de slot probablemente no tiene altura - agrega flex: 1.
Las pantallas secundarias también deben usar flex: 1 en su View raíz.
Verifica que el archivo de ruta coincidente tenga una exportación predeterminada.

¿Están deprecados los render props?

Los documentos de React favorecen hooks para muchos casos, pero los render props siguen siendo válidos - especialmente en bibliotecas.
Los APIs de lista de React Native siguen centrándose en renderItem.
Elige legibilidad: si un hook + componente es más claro, usa eso en su lugar.

¿Cómo escribo children como una función en TypeScript?

children: (state: State) => ReactNode - no Function o any.
Exporta la interfaz de estado para que los consumidores anoten componentes de renderizado extraídos.
Ver Typing Components & Props.

¿Pueden los render props ayudar con la UI específica de la plataforma?

Un wrapper MediaQuery o Platform.select puede exponer { isTablet } a su hijo de renderizado.
El llamador devuelve diferentes árboles para teléfono vs tablet sin bifurcar la capa de datos.
Empareja con Platform-Specific Code para divisiones de archivos cuando los árboles divergen mucho.

¿Cuántas capas de layout debe tener una aplicación de Expo Router?

Raíz: proveedores, fuentes, splash, análisis.
Grupo (app) / (auth): puertas de sesión.
_layout de característica: banner local, pestañas de segmento, <Slot />.
Evita duplicar el mismo proveedor en cada nivel.

¿Cómo se relaciona esto con container/presenter?

Los contenedores a menudo usan render props para pasar el estado asincrónico a los presentadores.
AsyncList es similar a un contenedor; InboxListUI es similar a un presentador.
Ver Container/Presenter on Mobile.

Relacionado

Component Patterns Basics - convenciones de carpeta que mantienen los layouts delgados
Compound Components - partes nombradas en lugar de hijos de función
Custom Hooks for UI Logic - alternativa de hook a render props
Container/Presenter on Mobile - dividir lógica de datos de UI amigable con slots
Expo Router Typed Routes - parámetros seguros de tipo con layouts de slot
Platform-Specific Code - cuando los árboles de renderizado divergen por SO

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).

Receta

Tarjeta de receta de referencia rápida - lista para copiar y pegar.

import type { ReactNode } from "react";
import { useCallback, useState } from "react";
import { Pressable, Text, View } from "react-native";
 
interface ToggleRenderProps {
  isOn: boolean;
  toggle: () => void;
}
 
interface ToggleProps {
  initial?: boolean;
  children: (state: ToggleRenderProps) => ReactNode;
}
 
export function Toggle({ initial = false, children }: ToggleProps) {
  const [isOn, setIsOn] = useState(initial);
  const toggle = useCallback(() => setIsOn((v) => !v), []);
  return <>{children({ isOn, toggle })}</>;
}
 
// El llamador pinta la UI - no requiere exportación Toggle.Button
export function NotificationRow() {
  return (
    <Toggle initial={true}>
      {({ isOn, toggle }) => (
        <Pressable onPress={toggle} style={{ flexDirection: "row", gap: 8 }}>
          <Text>Push alerts</Text>
          <Text>{isOn ? "On" : "Off"}</Text>
        </Pressable>
      )}
    </Toggle>
  );
}

Cuándo usar esto:

Un padre es dueño del estado o suscripciones pero los equipos de producto deben controlar el layout (listas, filas de configuración)
Los layouts de Expo Router / React Navigation necesitan una salida única para rutas anidadas (<Slot />)
Quieres evitar exportar cinco sub-componentes con estilo para un pequeño comportamiento
Las bibliotecas de terceros exponen children como una función (APIs estilo KeyboardAvoidingView)
Los árboles de navegadores profundos sufren del "infierno de wrappers" - cinco HOCs antes de la pantalla actual

Ejemplo de Trabajo

import type { ReactNode } from "react";
import { useCallback, useEffect, useState } from "react";
import {
  ActivityIndicator,
  FlatList,
  Pressable,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { Stack, Slot } from "expo-router";
 
interface AsyncState<T> {
  status: "idle" | "loading" | "success" | "error";
  data: T | null;
  error: string | null;
}
 
interface AsyncListProps<T> {
  load: () => Promise<T[]>;
  keyExtractor: (item: T) => string;
  children: (ctx: {
    items: T[];
    status: AsyncState<T[]>["status"];
    error: string | null;
    reload: () => void;
  }) => ReactNode;
}
 
function AsyncList<T>({ load, keyExtractor, children }: AsyncListProps<T>) {
  const [state, setState] = useState<AsyncState<T[]>>({
    status: "idle",
    data: null,
    error: null,
  });
 
  const reload = useCallback(async () => {
    setState((prev) => ({ status: "loading", data: prev.data, error: null }));
    try {
      const data = await load();
      setState({ status: "success", data, error: null });
    } catch (e) {
      setState({
        status: "error",
        data: null,
        error: e instanceof Error ? e.message : "Request failed",
      });
    }
  }, [load]);
 
  useEffect(() => {
    void reload();
  }, [reload]);
 
  const items = state.data ?? [];
 
  return (
    <View style={{ flex: 1 }}>
      {children({
        items,
        status: state.status,
        error: state.error,
        reload,
      })}
    </View>
  );
}
 
interface InboxItem {
  id: string;
  subject: string;
  unread: boolean;
}
 
const MOCK: InboxItem[] = [
  { id: "1", subject: "Release train Friday", unread: true },
  { id: "2", subject: "Design review notes", unread: false },
  { id: "3", subject: "Crash-free rate 99.2%", unread: true },
];
 
function InboxListUI({
  items,
  status,
  error,
  reload,
}: {
  items: InboxItem[];
  status: AsyncState<InboxItem[]>["status"];
  error: string | null;
  reload: () => void;
}) {
  if (status === "loading" && items.length === 0) {
    return <ActivityIndicator style={{ marginTop: 32 }} />;
  }
 
  if (status === "error") {
    return (
      <View style={styles.center}>
        <Text style={styles.error}>{error}</Text>
        <Pressable onPress={reload} style={styles.retry}>
          <Text style={styles.retryText}>Retry</Text>
        </Pressable>
      </View>
    );
  }
 
  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={[styles.row, item.unread && styles.unread]}>
          <Text style={styles.subject}>{item.subject}</Text>
          {item.unread ? <Text style={styles.dot}>•</Text> : null}
        </View>
      )}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      contentContainerStyle={styles.list}
    />
  );
}
 
export function InboxScreen() {
  const loadInbox = useCallback(
    () => new Promise<InboxItem[]>((r) => setTimeout(() => r(MOCK), 500)),
    []
  );
 
  return (
    <AsyncList load={loadInbox} keyExtractor={(item) => item.id}>
      {(ctx) => <InboxListUI {...ctx} />}
    </AsyncList>
  );
}
 
// Layout de Expo Router - el slot evita envolver manualmente cada pantalla secundaria
export function InboxLayout() {
  return (
    <View style={styles.layout}>
      <Stack.Screen options={{ title: "Inbox" }} />
      <View style={styles.banner}>
        <Text style={styles.bannerText}>Team mobile updates</Text>
      </View>
      <View style={styles.slot}>
        <Slot />
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  layout: { flex: 1, backgroundColor: "#f8fafc" },
  banner: {
    backgroundColor: "#0f172a",
    paddingHorizontal: 16,
    paddingVertical: 10,
  },
  bannerText: { color: "#fff", fontWeight: "600" },
  slot: { flex: 1 },
  list: { padding: 16 },
  row: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#fff",
    padding: 14,
    borderRadius: 10,
  },
  unread: { borderLeftWidth: 3, borderLeftColor: "#2563eb" },
  subject: { flex: 1, fontSize: 16, color: "#0f172a" },
  dot: { color: "#2563eb", fontSize: 20, lineHeight: 20 },
  separator: { height: 8 },
  center: { flex: 1, alignItems: "center", justifyContent: "center", gap: 12 },
  error: { color: "#dc2626", fontSize: 15 },
  retry: {
    backgroundColor: "#2563eb",
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 8,
  },
  retryText: { color: "#fff", fontWeight: "600" },
});

Lo que esto demuestra:

AsyncList es dueño del estado de fetch; el render prop pinta la UI de carga, error y FlatList
Los genéricos preservan el tipo InboxItem a través del callback de renderizado - sin any en renderItem
InboxLayout usa <Slot /> de Expo Router para que las rutas secundarias se rendericen sin wrappers por pantalla
El componente de comportamiento (AsyncList) se mantiene libre de estilos de marca; el componente UI (InboxListUI) se mantiene libre de lógica de fetch
Un archivo de layout agrega chrome de banner alrededor de cada ruta secundaria de inbox

Inmersión Profunda

Cómo Funciona

Render prop - children (o una prop nombrada como renderItem) es una función que el padre llama con estado: children({ isOn, toggle }).
El padre renderiza <> {children(state)} </> - no elige cuál Pressable o Text mostrar.
Patrón de slot - un layout renderiza chrome compartido e inserta <Slot /> donde el componente de la ruta secundaria coincidente debe aparecer.
Expo Router resuelve el hijo activo desde la URL; el layout no importa archivos de pantalla directamente.
Ambos patrones invierten el control: la biblioteca es dueña de la lógica; la aplicación es dueña de la estructura y el estilo.
La navegación profunda se beneficia porque los layouts reemplazan pilas de wrappers HOC (withAuth(withTheme(Screen)))

Render Prop vs Compound vs Hook

Patrón	El llamador proporciona	El padre proporciona	Mejor en móvil cuando
Render prop	Función que devuelve JSX	Estado + callbacks	Layouts únicos, personalización de fila de lista
Compound	Hijos JSX nombrados	Context + sub-partes	Pestañas del sistema de diseño, acordeón, campos
Custom hook	El cuerpo del componente llama `useX()`	Estado/acciones devueltos	Misma lógica, árboles totalmente diferentes
Slot (`<Slot />`)	Archivos de ruta secundaria	Chrome de layout	Expo Router / anidación basada en archivos

Layout de Slot de Expo Router

// app/(app)/settings/_layout.tsx
import { Stack, Slot } from "expo-router";
import { View, Text } from "react-native";
 
export default function SettingsLayout() {
  return (
    <View style={{ flex: 1 }}>
      <Stack.Screen options={{ headerShown: false }} />
      <Text style={{ padding: 16, fontWeight: "700" }}>Settings</Text>
      <Slot />
    </View>
  );
}

Slot renderiza la ruta secundaria activa - análogo a children en un componente de layout.
Usa archivos _layout.tsx anidados en lugar de componer manualmente navegadores en cada pantalla.
Empareja con rutas tipadas - ver Expo Router Typed Routes.

Render Props de Lista y Rendimiento

<FlatList
  data={items}
  renderItem={({ item }) => (
    <UserRow item={item} onPress={handlePress} />
  )}
/>

renderItem es un render prop construido en listas de React Native.
Extrae UserRow como un componente memoizado - no llames hooks dentro de renderItem.
Estabiliza handlePress con useCallback para que la memoización de fila funcione.

Notas de TypeScript

import type { ReactNode } from "react";
 
type RenderProp<T> = (value: T) => ReactNode;
 
interface DataRendererProps<T> {
  data: T;
  children: RenderProp<T>;
}
 
// Render prop nombrado cuando children ya se usa para composición
interface ListProps<T> {
  items: T[];
  renderRow: RenderProp<{ item: T; index: number }>;
  keyExtractor: (item: T) => string;
}

Prefiere nombres explícitos (renderHeader, renderEmpty) cuando children también es un nodo React válido.
Los padres genéricos (AsyncList<T>) mantienen los tipos de elemento fluyendo hacia el parámetro de callback.
Escribe el argumento de renderizado como una interfaz para que las pantallas obtengan autocompletado en reload, status, etc.

Errores comunes

Funciones de renderizado en línea en listas - children={(ctx) => <Row {...ctx} />} definida dentro de un padre recrea la función en cada renderizado y puede derrotar memo. Solución: Eleva un componente hijo estable o pasa renderRow desde useCallback.
Infierno de wrappers en navegadores - Anidar cinco proveedores en cada _layout.tsx oscurece la pantalla real. Solución: Empuja proveedores transversales al layout raíz; usa slots solo para chrome de nivel de ruta.
Usar render props cuando un hook es suficiente - Toggle con solo isOn/toggle no necesita un hijo de función si cada llamador renderiza la misma fila. Solución: Exporta useToggle y una fila tonta - ver Custom Hooks for UI Logic.
Llamar hooks dentro de render props - children={() => { const x = useFoo(); ... }} viola las Reglas de Hooks. Solución: Mueve las llamadas de hook a un componente hijo renderizado por la función.
Slot sin flex - Olvidar flex: 1 en el contenedor de slot produce pantallas secundarias en blanco o recortadas. Solución: Da al wrapper de slot flex: 1 en layouts de pantalla completa.
Bucles de recarga de render prop asincrónico - useEffect(() => reload(), [items]) cuando reload establece items causa una búsqueda infinita. Solución: Depende de claves estables; carga una vez en mount o en acciones de usuario explícitas.
children sin tipo como Función - children: Function pierde la seguridad de tipos. Solución: children: (state: ToggleRenderProps) => ReactNode.

Alternativas

Alternativa	Usar Cuando	No Usar Cuando
Render props	El llamador debe poseer todo el markup; pocas convenciones estructurales	El equipo prefiere sub-partes compuestas consistentes
Componentes compuestos	UI de múltiples partes repetidas (pestañas, campos)	Solo un layout consume el comportamiento
Hooks personalizados	Estado idéntico, árboles JSX arbitrarios	Necesitas un único límite de componente para límites de error
Expo Router `<Slot />`	Rutas secundarias basadas en archivos bajo chrome compartido	Superposiciones modales que no son rutas
HOCs (`withTheme`)	Base de código heredada ya estandarizada en ellos	Greenfield - layouts + hooks son más claros
Hijos JSX en línea	Composición estática, sin función de estado compartida	El padre debe inyectar estado dinámico en el hijo

Preguntas Frecuentes

¿Qué es un render prop?

Una prop (a menudo children) cuyo valor es una función que devuelve elementos React.
El componente padre llama la función con su estado interno.
El llamador decide qué primitivas nativas renderizar.

¿En qué se diferencia Slot de children en un layout?

children en React clásico son elementos pasados por el padre directo.
<Slot /> renderiza la ruta secundaria coincidente del enrutador - no JSX pasado manualmente.
Expo Router conecta el slot al sistema de archivos bajo el directorio del layout.

¿Por qué ocurre el infierno de wrappers en la navegación?

Cada preocupación (auth, theme, analytics, safe area) agrega una capa de layout u HOC.
Sin slots, cada ruta de importación de pantalla crece y el chrome compartido se duplica.
Los layouts raíz + grupo deben poseer proveedores; los layouts de hoja poseen solo chrome local.

Error común: ¿Puedo usar hooks dentro de un callback de render prop?

No - el callback no es un cuerpo de componente.
Devuelve <MyRow /> desde el callback y llama hooks dentro de MyRow.
Misma regla que FlatList renderItem.

Render props vs componentes compuestos - ¿Cuál gana para pestañas?

Compound cuando tu sistema de diseño envía Tabs.List / Tabs.Tab y los equipos reutilizan esa estructura.
Render props cuando cada pantalla del producto distribuye las pestañas de manera diferente (inferior vs control segmentado).
Híbrido: partes compuestas internamente, anulación renderTab opcional para casos avanzados.

¿Cómo evito recrear funciones de renderizado?

function InboxBody(props: InboxRenderProps) {
  return <InboxListUI {...props} />;
}
 
<AsyncList load={loadInbox} keyExtractor={(i) => i.id}>
  {InboxBody}
</AsyncList>

Pasa una referencia de función estable en lugar de una flecha en línea en JSX.
O envuelve con useCallback cuando la función cierra sobre props.

¿Usa FlatList un render prop?

Sí - renderItem, ListHeaderComponent y ListEmptyComponent son todos APIs de estilo de renderizado.
ListEmptyComponent puede ser un tipo de componente o una función que devuelve JSX.
Trata las filas de la lista como componentes de primera clase para hooks y memoización.

¿Cómo interactúan los slots con los navegadores Stack?

Un _layout.tsx puede renderizar <Stack /> para encabezados y aún usar <Slot /> en layouts anidados de estilo pestaña.
Stack.Screen options en layouts establece configuración de encabezado compartida para rutas secundarias.
Los enlaces profundos apuntan a rutas secundarias; el slot de layout se actualiza automáticamente.

Error común: ¿Pantalla en blanco debajo de mi banner de layout?

El contenedor de slot probablemente no tiene altura - agrega flex: 1.
Las pantallas secundarias también deben usar flex: 1 en su View raíz.
Verifica que el archivo de ruta coincidente tenga una exportación predeterminada.

¿Están deprecados los render props?

Los documentos de React favorecen hooks para muchos casos, pero los render props siguen siendo válidos - especialmente en bibliotecas.
Los APIs de lista de React Native siguen centrándose en renderItem.
Elige legibilidad: si un hook + componente es más claro, usa eso en su lugar.

¿Cómo escribo children como una función en TypeScript?

children: (state: State) => ReactNode - no Function o any.
Exporta la interfaz de estado para que los consumidores anoten componentes de renderizado extraídos.
Ver Typing Components & Props.

¿Pueden los render props ayudar con la UI específica de la plataforma?

Un wrapper MediaQuery o Platform.select puede exponer { isTablet } a su hijo de renderizado.
El llamador devuelve diferentes árboles para teléfono vs tablet sin bifurcar la capa de datos.
Empareja con Platform-Specific Code para divisiones de archivos cuando los árboles divergen mucho.

¿Cuántas capas de layout debe tener una aplicación de Expo Router?

Raíz: proveedores, fuentes, splash, análisis.
Grupo (app) / (auth): puertas de sesión.
_layout de característica: banner local, pestañas de segmento, <Slot />.
Evita duplicar el mismo proveedor en cada nivel.

¿Cómo se relaciona esto con container/presenter?

Los contenedores a menudo usan render props para pasar el estado asincrónico a los presentadores.
AsyncList es similar a un contenedor; InboxListUI es similar a un presentador.
Ver Container/Presenter on Mobile.

Relacionado

Component Patterns Basics - convenciones de carpeta que mantienen los layouts delgados
Compound Components - partes nombradas en lugar de hijos de función
Custom Hooks for UI Logic - alternativa de hook a render props
Container/Presenter on Mobile - dividir lógica de datos de UI amigable con slots
Expo Router Typed Routes - parámetros seguros de tipo con layouts de slot
Platform-Specific Code - cuando los árboles de renderizado divergen por SO

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).

Patrones de Render Props y Slots

Buscar en la documentación

Patrones de Render Props y Slots