Render Props & Slot Patterns

Q: O que é uma render prop?

Uma prop (geralmente children) cujo valor é uma função que retorna elementos React. O componente pai chama a função com seu estado interno. O chamador decide quais primitivos nativos renderizar.

Q: Como Slot é diferente de children em um layout?

children no React clássico são elementos passados pelo pai direto. renderiza a rota filha correspondente do roteador - não JSX passado manualmente. O Expo Router conecta o slot ao sistema de arquivos sob o diretório do layout.

Q: Armadilha: Posso usar hooks dentro de um callback de render prop?

Não - o callback não é um corpo de componente. Retorne do callback e chame hooks dentro de MyRow. Mesma regra de FlatList renderItem.

Q: Render props vs componentes compostos - qual vence para abas?

Composto quando seu sistema de design envia Tabs.List / Tabs.Tab e as equipes reutilizam essa estrutura. Render props quando cada tela de produto organiza as abas de forma diferente (controle inferior vs segmentado). Híbrido: partes compostas internamente, substituição opcional renderTab para casos avançados.

Q: O FlatList usa uma render prop?

Sim - renderItem, ListHeaderComponent e ListEmptyComponent são todas APIs do tipo render. ListEmptyComponent pode ser um tipo de componente ou uma função que retorna JSX. Trate as linhas da lista como componentes de primeira classe para hooks e memoização.

Q: Como os slots interagem com os navegadores Stack?

Um _layout.tsx pode renderizar para cabeçalhos e ainda usar em layouts aninhados do tipo aba. Stack.Screen options em layouts definem configurações de cabeçalho compartilhadas para rotas filhas. Links profundos visam rotas filhas; o slot de layout é atualizado automaticamente.

Render props e padrões de slot permitem que os pais controlem o comportamento enquanto os filhos controlam a marcação - assim, você compõe árvores de navegação profundas sem empilhar componentes wrapper em torno de cada tela. Render props passam estado através de uma função; padrões de slot (como nos layouts do Expo Router) reservam um espaço onde a rota filha ativa é renderizada.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

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 })}</>;
}
 
// O chamador pinta a UI - nenhuma exportação de Toggle.Button é necessária
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>
  );
}

Quando usar isso:

Um pai possui estado ou assinaturas, mas as equipes de produto devem controlar o layout (listas, linhas de configurações)
Layouts do Expo Router / React Navigation precisam de uma única saída para rotas aninhadas (<Slot />)
Você deseja evitar exportar cinco subcomponentes estilizados para um pequeno comportamento
Bibliotecas de terceiros expõem children como uma função (APIs no estilo KeyboardAvoidingView)
Árvores de navegadores profundas sofrem de "inferno de wrappers" - cinco HOCs antes da tela real

Exemplo de Trabalho

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>
  );
}
 
// Expo Router layout - slot evita envolver cada tela filha manualmente
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" },
});

O que isso demonstra:

AsyncList controla o status de busca; a render prop pinta a UI de carregamento, erro e FlatList.
Genéricos preservam o tipo InboxItem através do callback de renderização - sem any em renderItem.
InboxLayout usa o <Slot /> do Expo Router para que as rotas filhas renderizem sem wrappers por tela.
O componente de comportamento (AsyncList) permanece livre de estilos de marca; o componente de UI (InboxListUI) permanece livre de lógica de busca.
Um arquivo de layout adiciona cromagem de banner em torno de cada rota filha da caixa de entrada.

Mergulho Profundo

Como Funciona

Render prop - children (ou uma prop nomeada como renderItem) é uma função que o pai chama com estado: children({ isOn, toggle }).
O pai renderiza <> {children(state)} </> - ele não escolhe qual Pressable ou Text mostrar.
Padrão de slot - um layout renderiza cromagem compartilhada e insere <Slot /> onde o componente da rota filha correspondente deve aparecer.
O Expo Router resolve a criança ativa a partir da URL; o layout não importa arquivos de tela diretamente.
Ambos os padrões inverten o controle: a biblioteca possui a lógica; o aplicativo possui a estrutura e a estilização.
A navegação profunda se beneficia porque os layouts substituem pilhas de wrappers HOC (withAuth(withTheme(Screen))).

Render Prop vs Composto vs Hook

Padrão	Chamador fornece	Pai fornece	Melhor no celular quando
Render prop	Função que retorna JSX	Estado + callbacks	Layouts únicos, personalização de linha de lista
Composto	Filhos JSX nomeados	Contexto + sub-partes	Abas do sistema de design, acordeão, campos
Hook personalizado	Corpo do componente chama `useX()`	Estado/ações retornados	Mesma lógica, árvores totalmente diferentes
Slot (`<Slot />`)	Arquivos de rota filhos	Cromagem do layout	Expo Router / aninhamento baseado em arquivos

Layout de Slot do 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 a rota filha ativa - análoga a children em um componente de layout.
Use arquivos _layout.tsx aninhados em vez de compor navegadores manualmente em cada tela.
Emparelhe com rotas tipadas - veja Rotas Tipadas do Expo Router.

Render Props de Lista e Desempenho

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

renderItem é uma render prop integrada às listas do React Native.
Extraia UserRow como um componente memoizado - não chame hooks dentro de renderItem.
Estabilize handlePress com useCallback para que a memoização da linha 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 nomeada quando children já é usado para composição
interface ListProps<T> {
  items: T[];
  renderRow: RenderProp<{ item: T; index: number }>;
  keyExtractor: (item: T) => string;
}

Prefira nomes explícitos (renderHeader, renderEmpty) quando children também é um nó React válido.
Genéricos pais (AsyncList<T>) mantêm os tipos de item fluindo para o parâmetro do callback.
Tipar o argumento de renderização como uma interface para que as telas obtenham autocompletar em reload, status, etc.

Armadilhas

Funções de renderização inline em listas - children={(ctx) => <Row {...ctx} />} definidas dentro de um pai recriam a função a cada renderização e podem derrotar memo. Correção: Eleve um componente filho estável ou passe renderRow de useCallback.
Inferno de wrappers em navegadores - Aninhar cinco provedores em cada _layout.tsx obscurece a tela real. Correção: Empurre provedores transversais para o layout raiz; use slots apenas para cromagem de nível de rota.
Usar render props quando um hook é suficiente - Toggle com apenas isOn/toggle não precisa de um filho de função se cada chamador renderiza a mesma linha. Correção: Exporte useToggle e uma linha boba - veja Hooks Personalizados para Lógica de UI.
Chamar hooks dentro de render props - children={() => { const x = useFoo(); ... }} viola as Regras de Hooks. Correção: Mova as chamadas de hook para um componente filho renderizado pela função.
Slot sem flex - Esquecer flex: 1 no contêiner do slot resulta em telas filhas em branco ou cortadas. Correção: Dê ao wrapper do slot flex: 1 em layouts de tela inteira.
Loops de recarga de render prop assíncrona - useEffect(() => reload(), [items]) quando reload define items causa busca infinita. Correção: Dependa de chaves estáveis; carregue uma vez na montagem ou em uma ação explícita do usuário.
children não tipado como Função - children: Function perde a segurança de tipo. Correção: children: (state: ToggleRenderProps) => ReactNode.

Alternativas

Alternativa	Use Quando	Não Use Quando
Render props	O chamador deve possuir toda a marcação; poucas convenções estruturais	A equipe prefere sub-partes compostas consistentes
Componentes compostos	UI multi-partes repetida (abas, campos)	Apenas um layout consome o comportamento
Hooks personalizados	Estado idêntico, árvores JSX arbitrárias	Você precisa de um único limite de componente para limites de erro
Expo Router `<Slot />`	Rotas filhas baseadas em arquivos sob cromagem compartilhada	Overlays modais que não são rotas
HOCs (`withTheme`)	Base de código legada já padronizada neles	Greenfield - layouts + hooks são mais claros
Filhos JSX inline	Composição estática, sem função de estado compartilhado	O pai deve injetar estado dinâmico no filho

FAQs

O que é uma render prop?

Uma prop (geralmente children) cujo valor é uma função que retorna elementos React.
O componente pai chama a função com seu estado interno.
O chamador decide quais primitivos nativos renderizar.

Como Slot é diferente de children em um layout?

children no React clássico são elementos passados pelo pai direto.
<Slot /> renderiza a rota filha correspondente do roteador - não JSX passado manualmente.
O Expo Router conecta o slot ao sistema de arquivos sob o diretório do layout.

Por que o inferno de wrappers acontece na navegação?

Cada preocupação (auth, tema, analytics, área segura) adiciona uma camada de layout ou HOC.
Sem slots, cada caminho de importação de tela cresce e a cromagem compartilhada se duplica.
Layouts raiz + de grupo devem possuir provedores; layouts folha devem possuir apenas cromagem local.

Armadilha: Posso usar hooks dentro de um callback de render prop?

Não - o callback não é um corpo de componente.
Retorne <MyRow /> do callback e chame hooks dentro de MyRow.
Mesma regra de FlatList renderItem.

Render props vs componentes compostos - qual vence para abas?

Composto quando seu sistema de design envia Tabs.List / Tabs.Tab e as equipes reutilizam essa estrutura.
Render props quando cada tela de produto organiza as abas de forma diferente (controle inferior vs segmentado).
Híbrido: partes compostas internamente, substituição opcional renderTab para casos avançados.

Como evitar recriar funções de renderização?

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

Passe uma referência de função estável em vez de uma seta inline em JSX.
Ou envolva com useCallback quando a função fecha sobre props.

O FlatList usa uma render prop?

Sim - renderItem, ListHeaderComponent e ListEmptyComponent são todas APIs do tipo render.
ListEmptyComponent pode ser um tipo de componente ou uma função que retorna JSX.
Trate as linhas da lista como componentes de primeira classe para hooks e memoização.

Como os slots interagem com os navegadores Stack?

Um _layout.tsx pode renderizar <Stack /> para cabeçalhos e ainda usar <Slot /> em layouts aninhados do tipo aba.
Stack.Screen options em layouts definem configurações de cabeçalho compartilhadas para rotas filhas.
Links profundos visam rotas filhas; o slot de layout é atualizado automaticamente.

Armadilha: Tela em branco abaixo do banner do meu layout?

O contêiner do slot provavelmente não tem altura - adicione flex: 1.
As telas filhas também devem usar flex: 1 em sua View raiz.
Verifique se o arquivo de rota correspondente tem um export padrão.

Render props são obsoletas?

A documentação do React favorece hooks para muitos casos, mas render props permanecem válidas - especialmente em bibliotecas.
As APIs de lista do React Native ainda se concentram em renderItem.
Escolha a legibilidade: se um hook + componente for mais claro, use isso em vez disso.

Como tipar children como uma função em TypeScript?

children: (state: State) => ReactNode - não Function ou any.
Exporte a interface de estado para que os consumidores anotem componentes de renderização extraídos.
Veja Tipando Componentes e Props.

Render props podem ajudar com UI específica da plataforma?

Um wrapper MediaQuery ou Platform.select pode expor { isTablet } para seu filho de renderização.
O chamador retorna árvores diferentes para telefone vs tablet sem bifurcar a camada de dados.
Emparelhe com Código Específico da Plataforma para divisões de arquivos quando as árvores divergem pesadamente.

Quantas camadas de layout um aplicativo Expo Router deve ter?

Raiz: provedores, fontes, splash, analytics.
Grupo (app) / (auth): portões de sessão.
Recurso _layout: banner local, abas segmentadas, <Slot />.
Evite duplicar o mesmo provedor em todos os níveis.

Como isso se relaciona com container/presenter?

Containers frequentemente usam render props para passar estado assíncrono para apresentadores.
AsyncList é semelhante a um container; InboxListUI é semelhante a um apresentador.
Veja Container/Presenter no Celular.

Relacionado

Noções Básicas de Padrões de Componentes - convenções de pasta que mantêm os layouts finos
Componentes Compostos - partes nomeadas em vez de filhos de função
Hooks Personalizados para Lógica de UI - alternativa de hook para render props
Container/Presenter no Celular - separa a lógica de dados da UI amigável para slots
Rotas Tipadas do Expo Router - parâmetros seguros para tipo com layouts de slot
Código Específico da Plataforma - quando as árvores de renderização divergem por SO

Versões do Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

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 })}</>;
}
 
// O chamador pinta a UI - nenhuma exportação de Toggle.Button é necessária
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>
  );
}

Quando usar isso:

Um pai possui estado ou assinaturas, mas as equipes de produto devem controlar o layout (listas, linhas de configurações)
Layouts do Expo Router / React Navigation precisam de uma única saída para rotas aninhadas (<Slot />)
Você deseja evitar exportar cinco subcomponentes estilizados para um pequeno comportamento
Bibliotecas de terceiros expõem children como uma função (APIs no estilo KeyboardAvoidingView)
Árvores de navegadores profundas sofrem de "inferno de wrappers" - cinco HOCs antes da tela real

Exemplo de Trabalho

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>
  );
}
 
// Expo Router layout - slot evita envolver cada tela filha manualmente
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" },
});

O que isso demonstra:

AsyncList controla o status de busca; a render prop pinta a UI de carregamento, erro e FlatList.
Genéricos preservam o tipo InboxItem através do callback de renderização - sem any em renderItem.
InboxLayout usa o <Slot /> do Expo Router para que as rotas filhas renderizem sem wrappers por tela.
O componente de comportamento (AsyncList) permanece livre de estilos de marca; o componente de UI (InboxListUI) permanece livre de lógica de busca.
Um arquivo de layout adiciona cromagem de banner em torno de cada rota filha da caixa de entrada.

Mergulho Profundo

Como Funciona

Render prop - children (ou uma prop nomeada como renderItem) é uma função que o pai chama com estado: children({ isOn, toggle }).
O pai renderiza <> {children(state)} </> - ele não escolhe qual Pressable ou Text mostrar.
Padrão de slot - um layout renderiza cromagem compartilhada e insere <Slot /> onde o componente da rota filha correspondente deve aparecer.
O Expo Router resolve a criança ativa a partir da URL; o layout não importa arquivos de tela diretamente.
Ambos os padrões inverten o controle: a biblioteca possui a lógica; o aplicativo possui a estrutura e a estilização.
A navegação profunda se beneficia porque os layouts substituem pilhas de wrappers HOC (withAuth(withTheme(Screen))).

Render Prop vs Composto vs Hook

Padrão	Chamador fornece	Pai fornece	Melhor no celular quando
Render prop	Função que retorna JSX	Estado + callbacks	Layouts únicos, personalização de linha de lista
Composto	Filhos JSX nomeados	Contexto + sub-partes	Abas do sistema de design, acordeão, campos
Hook personalizado	Corpo do componente chama `useX()`	Estado/ações retornados	Mesma lógica, árvores totalmente diferentes
Slot (`<Slot />`)	Arquivos de rota filhos	Cromagem do layout	Expo Router / aninhamento baseado em arquivos

Layout de Slot do 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 a rota filha ativa - análoga a children em um componente de layout.
Use arquivos _layout.tsx aninhados em vez de compor navegadores manualmente em cada tela.
Emparelhe com rotas tipadas - veja Rotas Tipadas do Expo Router.

Render Props de Lista e Desempenho

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

renderItem é uma render prop integrada às listas do React Native.
Extraia UserRow como um componente memoizado - não chame hooks dentro de renderItem.
Estabilize handlePress com useCallback para que a memoização da linha 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 nomeada quando children já é usado para composição
interface ListProps<T> {
  items: T[];
  renderRow: RenderProp<{ item: T; index: number }>;
  keyExtractor: (item: T) => string;
}

Prefira nomes explícitos (renderHeader, renderEmpty) quando children também é um nó React válido.
Genéricos pais (AsyncList<T>) mantêm os tipos de item fluindo para o parâmetro do callback.
Tipar o argumento de renderização como uma interface para que as telas obtenham autocompletar em reload, status, etc.

Armadilhas

Funções de renderização inline em listas - children={(ctx) => <Row {...ctx} />} definidas dentro de um pai recriam a função a cada renderização e podem derrotar memo. Correção: Eleve um componente filho estável ou passe renderRow de useCallback.
Inferno de wrappers em navegadores - Aninhar cinco provedores em cada _layout.tsx obscurece a tela real. Correção: Empurre provedores transversais para o layout raiz; use slots apenas para cromagem de nível de rota.
Usar render props quando um hook é suficiente - Toggle com apenas isOn/toggle não precisa de um filho de função se cada chamador renderiza a mesma linha. Correção: Exporte useToggle e uma linha boba - veja Hooks Personalizados para Lógica de UI.
Chamar hooks dentro de render props - children={() => { const x = useFoo(); ... }} viola as Regras de Hooks. Correção: Mova as chamadas de hook para um componente filho renderizado pela função.
Slot sem flex - Esquecer flex: 1 no contêiner do slot resulta em telas filhas em branco ou cortadas. Correção: Dê ao wrapper do slot flex: 1 em layouts de tela inteira.
Loops de recarga de render prop assíncrona - useEffect(() => reload(), [items]) quando reload define items causa busca infinita. Correção: Dependa de chaves estáveis; carregue uma vez na montagem ou em uma ação explícita do usuário.
children não tipado como Função - children: Function perde a segurança de tipo. Correção: children: (state: ToggleRenderProps) => ReactNode.

Alternativas

Alternativa	Use Quando	Não Use Quando
Render props	O chamador deve possuir toda a marcação; poucas convenções estruturais	A equipe prefere sub-partes compostas consistentes
Componentes compostos	UI multi-partes repetida (abas, campos)	Apenas um layout consome o comportamento
Hooks personalizados	Estado idêntico, árvores JSX arbitrárias	Você precisa de um único limite de componente para limites de erro
Expo Router `<Slot />`	Rotas filhas baseadas em arquivos sob cromagem compartilhada	Overlays modais que não são rotas
HOCs (`withTheme`)	Base de código legada já padronizada neles	Greenfield - layouts + hooks são mais claros
Filhos JSX inline	Composição estática, sem função de estado compartilhado	O pai deve injetar estado dinâmico no filho

FAQs

O que é uma render prop?

Uma prop (geralmente children) cujo valor é uma função que retorna elementos React.
O componente pai chama a função com seu estado interno.
O chamador decide quais primitivos nativos renderizar.

Como Slot é diferente de children em um layout?

children no React clássico são elementos passados pelo pai direto.
<Slot /> renderiza a rota filha correspondente do roteador - não JSX passado manualmente.
O Expo Router conecta o slot ao sistema de arquivos sob o diretório do layout.

Por que o inferno de wrappers acontece na navegação?

Cada preocupação (auth, tema, analytics, área segura) adiciona uma camada de layout ou HOC.
Sem slots, cada caminho de importação de tela cresce e a cromagem compartilhada se duplica.
Layouts raiz + de grupo devem possuir provedores; layouts folha devem possuir apenas cromagem local.

Armadilha: Posso usar hooks dentro de um callback de render prop?

Não - o callback não é um corpo de componente.
Retorne <MyRow /> do callback e chame hooks dentro de MyRow.
Mesma regra de FlatList renderItem.

Render props vs componentes compostos - qual vence para abas?

Composto quando seu sistema de design envia Tabs.List / Tabs.Tab e as equipes reutilizam essa estrutura.
Render props quando cada tela de produto organiza as abas de forma diferente (controle inferior vs segmentado).
Híbrido: partes compostas internamente, substituição opcional renderTab para casos avançados.

Como evitar recriar funções de renderização?

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

Passe uma referência de função estável em vez de uma seta inline em JSX.
Ou envolva com useCallback quando a função fecha sobre props.

O FlatList usa uma render prop?

Sim - renderItem, ListHeaderComponent e ListEmptyComponent são todas APIs do tipo render.
ListEmptyComponent pode ser um tipo de componente ou uma função que retorna JSX.
Trate as linhas da lista como componentes de primeira classe para hooks e memoização.

Como os slots interagem com os navegadores Stack?

Um _layout.tsx pode renderizar <Stack /> para cabeçalhos e ainda usar <Slot /> em layouts aninhados do tipo aba.
Stack.Screen options em layouts definem configurações de cabeçalho compartilhadas para rotas filhas.
Links profundos visam rotas filhas; o slot de layout é atualizado automaticamente.

Armadilha: Tela em branco abaixo do banner do meu layout?

O contêiner do slot provavelmente não tem altura - adicione flex: 1.
As telas filhas também devem usar flex: 1 em sua View raiz.
Verifique se o arquivo de rota correspondente tem um export padrão.

Render props são obsoletas?

A documentação do React favorece hooks para muitos casos, mas render props permanecem válidas - especialmente em bibliotecas.
As APIs de lista do React Native ainda se concentram em renderItem.
Escolha a legibilidade: se um hook + componente for mais claro, use isso em vez disso.

Como tipar children como uma função em TypeScript?

children: (state: State) => ReactNode - não Function ou any.
Exporte a interface de estado para que os consumidores anotem componentes de renderização extraídos.
Veja Tipando Componentes e Props.

Render props podem ajudar com UI específica da plataforma?

Um wrapper MediaQuery ou Platform.select pode expor { isTablet } para seu filho de renderização.
O chamador retorna árvores diferentes para telefone vs tablet sem bifurcar a camada de dados.
Emparelhe com Código Específico da Plataforma para divisões de arquivos quando as árvores divergem pesadamente.

Quantas camadas de layout um aplicativo Expo Router deve ter?

Raiz: provedores, fontes, splash, analytics.
Grupo (app) / (auth): portões de sessão.
Recurso _layout: banner local, abas segmentadas, <Slot />.
Evite duplicar o mesmo provedor em todos os níveis.

Como isso se relaciona com container/presenter?

Containers frequentemente usam render props para passar estado assíncrono para apresentadores.
AsyncList é semelhante a um container; InboxListUI é semelhante a um apresentador.
Veja Container/Presenter no Celular.

Relacionado

Noções Básicas de Padrões de Componentes - convenções de pasta que mantêm os layouts finos
Componentes Compostos - partes nomeadas em vez de filhos de função
Hooks Personalizados para Lógica de UI - alternativa de hook para render props
Container/Presenter no Celular - separa a lógica de dados da UI amigável para slots
Rotas Tipadas do Expo Router - parâmetros seguros para tipo com layouts de slot
Código Específico da Plataforma - quando as árvores de renderização divergem por SO

Versões do Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Render Props & Slot Patterns

Buscar na documentação

Render Props & Slot Patterns