Junior React Native Developer — Perguntas de entrevista React Native

O que é um componente no React Native, e qual a diferença entre um componente funcional e um de classe?

Um componente é um pedaço reutilizável de UI, escrito como uma função (ou, historicamente, uma classe) que retorna JSX descrevendo o que renderizar. Componentes funcionais com hooks são a norma hoje — o código fica mais limpo, evita problemas de binding com this, e a lógica com estado pode ser reutilizada entre componentes via hooks customizados de um jeito que os métodos de ciclo de vida de classe não permitiam. Componentes de classe ainda funcionam e aparecem em bases de código mais antigas, mas código novo é funcional por padrão.

Qual é a diferença entre props e state?

Props vêm do pai e o componente não pode mudá-los — trate-os como entrada só de leitura. State pertence ao próprio componente, é criado com useState, e mudá-lo dispara um re-render. O texto de um botão geralmente é prop; se um modal está aberto no momento geralmente é state.

O que `useEffect` faz?

Roda uma função depois que o componente renderiza, para tudo que não é renderização pura — buscar dados, se inscrever num evento, configurar um timer. O array de dependências controla quando ele roda de novo, e uma função de limpeza retornada dele cuida de cancelar a inscrição antes da próxima execução ou ao desmontar. Omitir o array de dependências significa que o efeito roda depois de cada render, o que raramente é o que se quer.

Como você estiliza um componente no React Native?

Com um objeto JS, geralmente construído via StyleSheet.create({...}) e passado para a prop style — não existe um arquivo CSS separado. O layout usa Flexbox por padrão com flexDirection: 'column', então flex: 1, justifyContent e alignItems são as propriedades mais usadas para organizar os filhos. StyleSheet.create também permite que o React Native valide estilos e os referencie por ID em vez de recriar um objeto a cada render.

Como você navega entre telas com o React Navigation?

Envolva o app num navigator — geralmente um stack navigator para o padrão comum de push/pop —, registre cada tela com um nome, e chame navigation.navigate('ScreenName') de dentro de uma tela para ir até ela. Parâmetros viajam junto com a chamada, navigation.navigate('Details', { id: 5 }), e a tela de destino os lê de volta com route.params. Voltar usa navigation.goBack() ou o gesto/botão de voltar próprio da plataforma, que o stack navigator conecta automaticamente.

Como o React Native é diferente do React para a web?

Não existe DOM nem navegador — <View>, <Text> e <Image> substituem <div>, <span> e <img>, e renderizam para views nativas reais do UIKit/Android em vez de elementos HTML. Estilização é objeto JS em vez de CSS, não existe className, e APIs de navegador como localStorage não existem — o React Native tem seus próprios equivalentes, como AsyncStorage. O modelo de componentes, os hooks e o fluxo de dados unidirecional são, fora isso, o mesmo modelo mental do React na web.