Boas Práticas de Padrões de Componentes

Q: Como asChild difere de passar children?

asChild mescla props de acessibilidade e de clique no host filho - o filho se torna o elemento interativo. Children simples renderizam dentro de um Pressable wrapper, o que quebra semântica de link e regras de aninhamento.

Q: Qual é a primeira extração de uma tela "deus"?

O bloco JSX de apresentação em um componente *View com props tipadas. Deixe o fetch e router.push no arquivo da tela até que a view se estabilize.

Q: Qual arquivo pertence a app/ vs features/?

Rotas app/ permanecem finas - importe FeatureScreen de features/ e renderize-o. A lógica de negócios nunca é exportada de arquivos de rota para outras funcionalidades importarem.

Um resumo condensado das 25 práticas recomendadas mais importantes extraídas de cada página desta seção.

Nomeie a divisão tela vs. presenter: A tela (container) é responsável por dados, navegação e efeitos colaterais; o presenter renderiza apenas props - se você não consegue testar a UI sem mockar o fetch, o limite está errado.
Co-localize por funcionalidade, não por tipo: Mantenha features/orders/screens, hooks e components juntos - um dump global de components/ se torna um cemitério de wrappers de uso único.
Uma exportação pública por funcionalidade: Exponha OrdersScreen de features/orders/index.ts - arquivos de rota importam um único símbolo; os internos permanecem privados para a pasta.
Extraia hooks de UI antes do terceiro useState: O estado de abertura de modais, toggles de divulgação e chips de filtro pertencem a useDisclosure / useFilters - não vinte chamadas de useState no topo de uma tela.
Mantenha hooks de dados separados de hooks de UI: useOrdersQuery busca dados; useOrderFilters molda a UI - misturá-los torna os hooks in-testáveis e causa fetches desnecessários em toggles não relacionados.
Use componentes compostos para UI multi-parte: Abas, accordions e grupos de campos compartilham estado implícito via contexto - passar selectedIndex via prop-drilling por quatro camadas é um imposto de manutenção.
Exponha métodos de intenção em APIs compostas: Exporte selectTab(id) em vez de setIndex bruto - as telas não devem contornar validação ou hooks de analytics conectados dentro da raiz composta.
Alcance por render props quando os filhos precisam de dados que o pai possui: Estados vazios de listas e skeletons de linhas são slots clássicos de render props - evite clonar o pai apenas para ler seu estado.
Use <Slot /> do Expo Router para shells de layout: Padrões de slot achatam árvores de navegação profundas sem inferno de wrappers - o layout é responsável pelo chrome; rotas folha são responsáveis pelo conteúdo.
Nomenclatura de container/presenter é documentação: Sufixe OrdersScreen + OrdersView (ou OrdersPresenter) para que os revisores saibam instantaneamente qual arquivo pode chamar fetch ou router.push.
Teste presenters com props simples: Presenters devem renderizar a partir de um objeto de props sem nenhum provider - testes de snapshot e de interação rodam em milissegundos sem MSW.
Primitivas headless retornam comportamento, não estilos: useDisclosure exporta bags de triggerProps e contentProps - a saída pré-estilizada na primitiva acopla cada consumidor aos seus tokens de design.
Espelhe o estado visual nas props de acessibilidade: Abas selecionadas e accordions expandidos devem definir accessibilityState e accessibilityRole - VoiceOver não lê seu CSS.
Memoize prop bags de acessibilidade: Reconstruir { onPress, accessibilityRole, … } inline a cada renderização anula o memo em linhas de lista - useMemo com chave em open / selected.
Nunca chame hooks dentro de render props: children={() => useFoo()} viola as Regras de Hooks - extraia um componente filho nomeado ou chame o hook no pai.
Use as polimórfico com genéricos: BoxProps<E extends ElementType> preserva a tipagem de href vs onPress - ElementType bruto apaga o contrato do host.
Prefira asChild em vez de touchables aninhados: Mesclar props no Link do Expo Router evita árvores inválidas de Pressable > Link e corrige a ordem de foco em alvos web.
Force um único filho para asChild: Children.only falha rapidamente quando designers envolvem dois nós - documente a restrição em exemplos do Storybook.
Encadeie manipuladores onPress deliberadamente: Pai e filho disparam por padrão - documente a precedência quando a navegação deve engolir o manipulador pai.
Divida telas "deuses" com 300 linhas, não 2.000: Extraia presenters e hooks incrementalmente - esperar até que um arquivo se torne in-manutenível garante um refator arriscado em big-bang.
Mova renderItem do FlatList para um componente de linha memoizado: Fechos inline de renderItem de 200 linhas recriam a cada renderização pai e bloqueiam ganhos de virtualização.
Valide parâmetros de rota no container: Telas "deuses" ramificam em doze parâmetros de string brutos - analise useLocalSearchParams com Zod no container da tela antes de passar props tipadas para baixo.
Mantenha switches de plataforma em presenters ou tokens: Ternários repetidos de Platform.OS através de JSX sinalizam uma divisão de presenter ausente ou uma variante de sistema de design.
Reserve stores globais para estado cross-rota: O estado de abertura do bottom-sheet para uma única tela não pertence ao Zustand - estado local ou um contexto com escopo de funcionalidade é suficiente.
Teste unitariamente hooks headless, snapshot de uma pele: Teste o comportamento de useDisclosure isoladamente; teste de integração de um único componente de referência estilizado - não cada árvore de marcação consumidora.

FAQs

Quando devo usar componentes compostos em vez de apenas contexto?

Componentes compostos quando a API pública são partes estáticas (Tabs.List, Tabs.Panel) que devem permanecer sincronizadas.
Contexto bruto quando existe apenas um wrapper e a API é um único provider + hook.

Container/presenter é exagero para telas pequenas?

Uma tela de 80 linhas pode permanecer combinada - divida quando adicionar fetching, navegação ou uma segunda variante de presenter (loading/error).
A divisão se paga na primeira vez que você escreve um teste de presenter sem MSW.

Como `asChild` difere de passar children?

asChild mescla props de acessibilidade e de clique no host filho - o filho se torna o elemento interativo.
Children simples renderizam dentro de um Pressable wrapper, o que quebra semântica de link e regras de aninhamento.

Qual é a primeira extração de uma tela "deus"?

O bloco JSX de apresentação em um componente *View com props tipadas.
Deixe o fetch e router.push no arquivo da tela até que a view se estabilize.

Botões de design-system devem ser headless?

Primitivas (disclosure, tabs, combobox) devem ser headless ou compostas.
Botões de marca com opinião podem ser enviados estilizados - nem todo átomo precisa de um gêmeo hook.

Render props ainda importam com hooks?

Sim, quando o pai possui dados que o layout filho não deve buscar - hooks substituem render props apenas quando o filho pode chamar o hook diretamente no nível superior.

Qual arquivo pertence a app/ vs features/?

Rotas app/ permanecem finas - importe FeatureScreen de features/ e renderize-o.
A lógica de negócios nunca é exportada de arquivos de rota para outras funcionalidades importarem.

Relacionados

Noções Básicas de Padrões de Componentes - tour de tela/presenter e convenções de pastas
Hooks Customizados para Lógica de UI - extraindo UI com estado sem prop drilling
Componentes Compostos - abas, accordions e grupos de campos
Container/Presenter em Mobile - divisão testável de dados/UI
Componentes Headless - primitivas apenas de lógica e prop bags de a11y
Anti-Padrões: Telas "Deus" - como telas grandes falham e como dividi-las

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

Boas Práticas de Padrões de Componentes

Um resumo condensado das 25 práticas recomendadas mais importantes extraídas de cada página desta seção.

Nomeie a divisão tela vs. presenter: A tela (container) é responsável por dados, navegação e efeitos colaterais; o presenter renderiza apenas props - se você não consegue testar a UI sem mockar o fetch, o limite está errado.
Co-localize por funcionalidade, não por tipo: Mantenha features/orders/screens, hooks e components juntos - um dump global de components/ se torna um cemitério de wrappers de uso único.
Uma exportação pública por funcionalidade: Exponha OrdersScreen de features/orders/index.ts - arquivos de rota importam um único símbolo; os internos permanecem privados para a pasta.
Extraia hooks de UI antes do terceiro useState: O estado de abertura de modais, toggles de divulgação e chips de filtro pertencem a useDisclosure / useFilters - não vinte chamadas de useState no topo de uma tela.
Mantenha hooks de dados separados de hooks de UI: useOrdersQuery busca dados; useOrderFilters molda a UI - misturá-los torna os hooks in-testáveis e causa fetches desnecessários em toggles não relacionados.
Use componentes compostos para UI multi-parte: Abas, accordions e grupos de campos compartilham estado implícito via contexto - passar selectedIndex via prop-drilling por quatro camadas é um imposto de manutenção.
Exponha métodos de intenção em APIs compostas: Exporte selectTab(id) em vez de setIndex bruto - as telas não devem contornar validação ou hooks de analytics conectados dentro da raiz composta.
Alcance por render props quando os filhos precisam de dados que o pai possui: Estados vazios de listas e skeletons de linhas são slots clássicos de render props - evite clonar o pai apenas para ler seu estado.
Use <Slot /> do Expo Router para shells de layout: Padrões de slot achatam árvores de navegação profundas sem inferno de wrappers - o layout é responsável pelo chrome; rotas folha são responsáveis pelo conteúdo.
Nomenclatura de container/presenter é documentação: Sufixe OrdersScreen + OrdersView (ou OrdersPresenter) para que os revisores saibam instantaneamente qual arquivo pode chamar fetch ou router.push.
Teste presenters com props simples: Presenters devem renderizar a partir de um objeto de props sem nenhum provider - testes de snapshot e de interação rodam em milissegundos sem MSW.
Primitivas headless retornam comportamento, não estilos: useDisclosure exporta bags de triggerProps e contentProps - a saída pré-estilizada na primitiva acopla cada consumidor aos seus tokens de design.
Espelhe o estado visual nas props de acessibilidade: Abas selecionadas e accordions expandidos devem definir accessibilityState e accessibilityRole - VoiceOver não lê seu CSS.
Memoize prop bags de acessibilidade: Reconstruir { onPress, accessibilityRole, … } inline a cada renderização anula o memo em linhas de lista - useMemo com chave em open / selected.
Nunca chame hooks dentro de render props: children={() => useFoo()} viola as Regras de Hooks - extraia um componente filho nomeado ou chame o hook no pai.
Use as polimórfico com genéricos: BoxProps<E extends ElementType> preserva a tipagem de href vs onPress - ElementType bruto apaga o contrato do host.
Prefira asChild em vez de touchables aninhados: Mesclar props no Link do Expo Router evita árvores inválidas de Pressable > Link e corrige a ordem de foco em alvos web.
Force um único filho para asChild: Children.only falha rapidamente quando designers envolvem dois nós - documente a restrição em exemplos do Storybook.
Encadeie manipuladores onPress deliberadamente: Pai e filho disparam por padrão - documente a precedência quando a navegação deve engolir o manipulador pai.
Divida telas "deuses" com 300 linhas, não 2.000: Extraia presenters e hooks incrementalmente - esperar até que um arquivo se torne in-manutenível garante um refator arriscado em big-bang.
Mova renderItem do FlatList para um componente de linha memoizado: Fechos inline de renderItem de 200 linhas recriam a cada renderização pai e bloqueiam ganhos de virtualização.
Valide parâmetros de rota no container: Telas "deuses" ramificam em doze parâmetros de string brutos - analise useLocalSearchParams com Zod no container da tela antes de passar props tipadas para baixo.
Mantenha switches de plataforma em presenters ou tokens: Ternários repetidos de Platform.OS através de JSX sinalizam uma divisão de presenter ausente ou uma variante de sistema de design.
Reserve stores globais para estado cross-rota: O estado de abertura do bottom-sheet para uma única tela não pertence ao Zustand - estado local ou um contexto com escopo de funcionalidade é suficiente.
Teste unitariamente hooks headless, snapshot de uma pele: Teste o comportamento de useDisclosure isoladamente; teste de integração de um único componente de referência estilizado - não cada árvore de marcação consumidora.

FAQs

Quando devo usar componentes compostos em vez de apenas contexto?

Componentes compostos quando a API pública são partes estáticas (Tabs.List, Tabs.Panel) que devem permanecer sincronizadas.
Contexto bruto quando existe apenas um wrapper e a API é um único provider + hook.

Container/presenter é exagero para telas pequenas?

Uma tela de 80 linhas pode permanecer combinada - divida quando adicionar fetching, navegação ou uma segunda variante de presenter (loading/error).
A divisão se paga na primeira vez que você escreve um teste de presenter sem MSW.

Como `asChild` difere de passar children?

asChild mescla props de acessibilidade e de clique no host filho - o filho se torna o elemento interativo.
Children simples renderizam dentro de um Pressable wrapper, o que quebra semântica de link e regras de aninhamento.

Qual é a primeira extração de uma tela "deus"?

O bloco JSX de apresentação em um componente *View com props tipadas.
Deixe o fetch e router.push no arquivo da tela até que a view se estabilize.

Botões de design-system devem ser headless?

Primitivas (disclosure, tabs, combobox) devem ser headless ou compostas.
Botões de marca com opinião podem ser enviados estilizados - nem todo átomo precisa de um gêmeo hook.

Render props ainda importam com hooks?

Sim, quando o pai possui dados que o layout filho não deve buscar - hooks substituem render props apenas quando o filho pode chamar o hook diretamente no nível superior.

Qual arquivo pertence a app/ vs features/?

Rotas app/ permanecem finas - importe FeatureScreen de features/ e renderize-o.
A lógica de negócios nunca é exportada de arquivos de rota para outras funcionalidades importarem.

Relacionados

Noções Básicas de Padrões de Componentes - tour de tela/presenter e convenções de pastas
Hooks Customizados para Lógica de UI - extraindo UI com estado sem prop drilling
Componentes Compostos - abas, accordions e grupos de campos
Container/Presenter em Mobile - divisão testável de dados/UI
Componentes Headless - primitivas apenas de lógica e prop bags de a11y
Anti-Padrões: Telas "Deus" - como telas grandes falham e como dividi-las

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

Boas Práticas de Padrões de Componentes

FAQs

Relacionados

Buscar na documentação

Boas Práticas de Padrões de Componentes

FAQs

Relacionados