dezembro 21, 2025
14 min de leitura

Perguntas para Entrevista de Desenvolvedor React Native Júnior: Guia Completo

interview
career-advice
job-search
entry-level
Perguntas para Entrevista de Desenvolvedor React Native Júnior: Guia Completo
Milad Bonakdar

Milad Bonakdar

Autor

Domine os fundamentos do desenvolvimento React Native com perguntas essenciais para entrevistas, abrangendo o básico de React, componentes, navegação, gerenciamento de estado e conceitos específicos para dispositivos móveis para desenvolvedores juniores.


Introdução

React Native permite que desenvolvedores construam aplicativos móveis nativos usando JavaScript e React. Com uma única base de código, você pode criar aplicativos para iOS e Android, tornando-o uma escolha poderosa para o desenvolvimento móvel multiplataforma.

Este guia abrange as principais perguntas de entrevista para Desenvolvedores React Native Júnior. Exploramos os fundamentos do React, componentes, hooks, navegação, gerenciamento de estado e conceitos específicos para dispositivos móveis para ajudá-lo a se preparar para sua primeira função como desenvolvedor React Native.


Fundamentos do React (6 Perguntas)

1. O que é React Native e como ele difere do React?

Resposta:

  • React: Biblioteca JavaScript para construir interfaces de usuário web
  • React Native: Framework para construir aplicativos móveis nativos usando React
  • Principais Diferenças:
    • React Native renderiza para componentes nativos (não DOM)
    • Usa APIs nativas em vez de APIs web
    • Abordagem de estilo diferente (sem CSS, usa StyleSheet)
    • Código específico da plataforma para iOS e Android
// React (Web)
import React from 'react';

function App() {
  return <div className="container">Olá Web</div>;
}

// React Native (Mobile)
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <Text>Olá Mobile</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Raridade: Muito Comum Dificuldade: Fácil


2. Quais são os componentes principais no React Native?

Resposta: React Native fornece componentes integrados que mapeiam para elementos de UI nativos:

  • View: Componente de contêiner (como div na web)
  • Text: Exibe texto (todo texto deve estar no componente Text)
  • Image: Exibe imagens
  • ScrollView: Contêiner rolável
  • TextInput: Campo de entrada de texto
  • TouchableOpacity/Pressable: Elementos toucháveis
  • FlatList: Renderização de lista eficiente
  • Button: Componente de botão básico
import {
  View,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Bem-vindo</Text>
      <Image source={{ uri: 'https://example.com/image.jpg' }} style={styles.image} />
      <TextInput placeholder="Digite o nome" style={styles.input} />
      <TouchableOpacity style={styles.button} onPress={() => console.log('Pressionado')}>
        <Text style={styles.buttonText}>Clique Aqui</Text>
      </TouchableOpacity>
    </View>
  );
}

Raridade: Muito Comum Dificuldade: Fácil


3. Explique a diferença entre View e ScrollView.

Resposta:

  • View: Contêiner estático. O conteúdo além dos limites da tela não é rolável.
  • ScrollView: Contêiner rolável. Renderiza todos os filhos de uma vez (pode consumir muita memória para listas grandes).
  • Quando usar:
    • View: Para layouts que cabem na tela
    • ScrollView: Para pequenas quantidades de conteúdo rolável
    • FlatList: Para listas grandes (renderiza apenas os itens visíveis)
// View - não rolável
<View style={{ height: 200 }}>
  <Text>Conteúdo 1</Text>
  <Text>Conteúdo 2</Text>
  {/* Se o conteúdo exceder 200px, ele será cortado */}
</View>

// ScrollView - rolável
<ScrollView style={{ height: 200 }}>
  <Text>Conteúdo 1</Text>
  <Text>Conteúdo 2</Text>
  <Text>Conteúdo 3</Text>
  {/* Pode rolar para ver todo o conteúdo */}
</ScrollView>

// FlatList - eficiente para listas grandes
<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  keyExtractor={item => item.id}
/>

Raridade: Muito Comum Dificuldade: Fácil


4. O que são React Hooks e quais são os mais usados?

Resposta: Hooks são funções que permitem usar recursos de estado e ciclo de vida em componentes funcionais.

  • Hooks Comuns:
    • useState: Gerencia o estado do componente
    • useEffect: Lida com efeitos colaterais (busca de dados, assinaturas)
    • useContext: Acessa valores de contexto
    • useCallback: Memoiza funções
    • useMemo: Memoiza cálculos caros
    • useRef: Referencia elementos DOM ou persiste valores
import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log(`Contagem alterada para: ${count}`);
    
    // Função de limpeza
    return () => {
      console.log('Limpeza');
    };
  }, [count]); // Executa quando a contagem muda
  
  return (
    <View>
      <Text>Contagem: {count}</Text>
      <Button title="Incrementar" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Raridade: Muito Comum Dificuldade: Fácil


5. Explique o hook useEffect e seu array de dependências.

Resposta: useEffect executa efeitos colaterais após a renderização. O array de dependências controla quando ele é executado:

  • Sem array: Executa após cada renderização
  • Array vazio []: Executa uma vez após a renderização inicial
  • Com dependências [dep1, dep2]: Executa quando as dependências mudam
import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  // Executa uma vez na montagem
  useEffect(() => {
    console.log('Componente montado');
  }, []);
  
  // Executa quando userId muda
  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
  }, [userId]);
  
  // Executa após cada renderização (evite isso)
  useEffect(() => {
    console.log('Renderizado');
  });
  
  // Função de limpeza
  useEffect(() => {
    const subscription = subscribeToUpdates();
    
    return () => {
      subscription.unsubscribe(); // Limpeza na desmontagem
    };
  }, []);
  
  return <Text>{user?.name}</Text>;
}

Raridade: Muito Comum Dificuldade: Média


6. O que é o Virtual DOM e como o React o usa?

Resposta: O Virtual DOM é uma representação JavaScript leve do DOM real.

  • Processo:
    1. Quando o estado muda, o React cria uma nova árvore Virtual DOM
    2. Compara com o Virtual DOM anterior (diffing)
    3. Calcula as mudanças mínimas necessárias
    4. Atualiza apenas as partes alteradas no DOM real
  • Benefícios: Atualizações eficientes, melhor desempenho

Raridade: Comum Dificuldade: Fácil


Componentes e Props (4 Perguntas)

7. Qual é a diferença entre Props e State?

Resposta:

  • Props:
    • Passadas do pai para o filho
    • Somente leitura (imutável)
    • Usadas para configuração do componente
  • State:
    • Gerenciado dentro do componente
    • Mutável (pode ser alterado)
    • Usado para dados dinâmicos
// Componente pai
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <ChildComponent 
      title="Contador"  // Props
      count={count}    // Props
      onIncrement={() => setCount(count + 1)}  // Props
    />
  );
}

// Componente filho
function ChildComponent({ title, count, onIncrement }) {
  // Não pode modificar props
  // title = "Novo Título"; // Erro!
  
  return (
    <View>
      <Text>{title}</Text>
      <Text>Contagem: {count}</Text>
      <Button title="Incrementar" onPress={onIncrement} />
    </View>
  );
}

Raridade: Muito Comum Dificuldade: Fácil


8. O que são Componentes Funcionais vs Componentes de Classe?

Resposta:

  • Componentes Funcionais:
    • Sintaxe mais simples
    • Usam hooks para estado e ciclo de vida
    • Preferidos no React moderno
  • Componentes de Classe:
    • Abordagem mais antiga
    • Usam this.state e métodos de ciclo de vida
    • Ainda suportados, mas menos comuns
// Componente Funcional (Moderno)
function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log('Montado');
  }, []);
  
  return <Text>Olá, {name}</Text>;
}

// Componente de Classe (Legado)
class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    console.log('Montado');
  }
  
  render() {
    return <Text>Olá, {this.props.name}</Text>;
  }
}

Raridade: Comum Dificuldade: Fácil


9. Como você passa dados do componente filho para o componente pai?

Resposta: Use funções de callback passadas como props.

// Componente pai
function ParentComponent() {
  const [message, setMessage] = useState('');
  
  const handleMessageFromChild = (msg) => {
    setMessage(msg);
  };
  
  return (
    <View>
      <Text>Mensagem do filho: {message}</Text>
      <ChildComponent onSendMessage={handleMessageFromChild} />
    </View>
  );
}

// Componente filho
function ChildComponent({ onSendMessage }) {
  const [input, setInput] = useState('');
  
  const sendMessage = () => {
    onSendMessage(input); // Chama a função do pai
  };
  
  return (
    <View>
      <TextInput value={input} onChangeText={setInput} />
      <Button title="Enviar para o Pai" onPress={sendMessage} />
    </View>
  );
}

Raridade: Muito Comum Dificuldade: Fácil


10. O que é a prop key e por que ela é importante?

Resposta: A prop key ajuda o React a identificar quais itens foram alterados, adicionados ou removidos em listas.

  • Propósito: Otimizar o desempenho da renderização
  • Requisitos: Deve ser único entre os irmãos, estável (não use o índice se a lista puder mudar)
// Bom - usando ID único
function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={item => item.id} // Chave única
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

// Ruim - usando índice (evite se a lista puder mudar)
function BadList({ items }) {
  return (
    <View>
      {items.map((item, index) => (
        <Text key={index}>{item}</Text> // Não use o índice
      ))}
    </View>
  );
}

// Bom - usando propriedade única
function GoodList({ items }) {
  return (
    <View>
      {items.map(item => (
        <Text key={item.id}>{item.name}</Text>
      ))}
    </View>
  );
}

Raridade: Muito Comum Dificuldade: Fácil


Estilo e Layout (3 Perguntas)

11. Como você estiliza componentes no React Native?

Resposta: React Native usa objetos JavaScript para estilizar, não CSS.

  • StyleSheet API: Cria estilos otimizados
  • Estilos Inline: Objetos de estilo diretos (menos performático)
  • Flexbox: Sistema de layout padrão
import { View, Text, StyleSheet } from 'react-native';

function StyledComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Título</Text>
      <Text style={[styles.text, styles.bold]}>Múltiplos estilos</Text>
      <Text style={{ color: 'red' }}>Estilo inline</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  text: {
    fontSize: 16,
    color: '#666',
  },
  bold: {
    fontWeight: 'bold',
  },
});

Raridade: Muito Comum Dificuldade: Fácil


12. Explique Flexbox no React Native.

Resposta: Flexbox é o sistema de layout primário no React Native.

  • Propriedades Principais:
    • flexDirection: row ou column (padrão: column)
    • justifyContent: Alinha ao longo do eixo principal
    • alignItems: Alinha ao longo do eixo transversal
    • flex: Dimensionamento proporcional
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // Layout horizontal
    justifyContent: 'space-between', // Espaça os itens uniformemente
    alignItems: 'center', // Centraliza verticalmente
  },
  box1: {
    flex: 1, // Ocupa 1/3 do espaço
    backgroundColor: 'red',
  },
  box2: {
    flex: 2, // Ocupa 2/3 do espaço
    backgroundColor: 'blue',
  },
});

function FlexExample() {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
    </View>
  );
}

Raridade: Muito Comum Dificuldade: Média


13. Qual é a diferença entre margin e padding?

Resposta:

  • Padding: Espaço dentro do componente (entre o conteúdo e a borda)
  • Margin: Espaço fora do componente (entre o componente e os vizinhos)
const styles = StyleSheet.create({
  box: {
    margin: 20,        // Espaço fora
    padding: 10,       // Espaço dentro
    backgroundColor: 'lightblue',
  },
  // Lados específicos
  specificBox: {
    marginTop: 10,
    marginBottom: 20,
    paddingLeft: 15,
    paddingRight: 15,
  },
  // Horizontal e vertical
  shorthand: {
    marginHorizontal: 20,  // esquerda e direita
    marginVertical: 10,    // topo e inferior
    paddingHorizontal: 15,
    paddingVertical: 5,
  },
});

Raridade: Comum Dificuldade: Fácil


14. O que é React Navigation e como você o usa?

Resposta: React Navigation é a biblioteca de navegação mais popular para React Native.

  • Tipos:
    • Stack Navigator: Pilha de telas (push/pop)
    • Tab Navigator: Abas inferiores
    • Drawer Navigator: Menu lateral
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Tela Inicial</Text>
      <Button
        title="Ir para Detalhes"
        onPress={() => navigation.navigate('Details', { itemId: 42 })}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  const { itemId } = route.params;
  
  return (
    <View>
      <Text>Tela de Detalhes</Text>
      <Text>ID do Item: {itemId}</Text>
      <Button title="Voltar" onPress={() => navigation.goBack()} />
    </View>
  );
}

Raridade: Muito Comum Dificuldade: Média


15. Como você passa parâmetros entre telas?

Resposta: Use a função navigate com um segundo parâmetro para dados.

// Navegar com parâmetros
function HomeScreen({ navigation }) {
  const user = { id: 1, name: 'John', email: '[email protected]' };
  
  return (
    <Button
      title="Ver Perfil"
      onPress={() => navigation.navigate('Profile', { user })}
    />
  );
}

// Receber parâmetros
function ProfileScreen({ route }) {
  const { user } = route.params;
  
  return (
    <View>
      <Text>Nome: {user.name}</Text>
      <Text>Email: {user.email}</Text>
    </View>
  );
}

// Atualizar parâmetros
function EditScreen({ navigation }) {
  const updateUser = () => {
    navigation.setParams({ user: updatedUser });
  };
  
  return <Button title="Atualizar" onPress={updateUser} />;
}

Raridade: Muito Comum Dificuldade: Fácil


16. O que são opções de navegação e como você personaliza os headers?

Resposta: As opções de navegação controlam a aparência e o comportamento da tela.

function HomeScreen({ navigation }) {
  useEffect(() => {
    navigation.setOptions({
      title: 'Minha Home',
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      headerRight: () => (
        <Button title="Info" onPress={() => alert('Info')} />
      ),
    });
  }, [navigation]);
  
  return <View><Text>Home</Text></View>;
}

// Ou defina no navegador
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    title: 'Minha Home',
    headerStyle: { backgroundColor: '#f4511e' },
    headerTintColor: '#fff',
  }}
/>

Raridade: Comum Dificuldade: Fácil


Dados e Armazenamento (4 Perguntas)

17. Como você busca dados de uma API no React Native?

Resposta: Use a API fetch ou bibliotecas como Axios.

import { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetchUsers();
  }, []);
  
  const fetchUsers = async () => {
    try {
      const response = await fetch('https://api.example.com/users');
      
      if (!response.ok) {
        throw new Error('A resposta da rede não estava ok');
      }
      
      const data = await response.json();
      setUsers(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  if (loading) return <ActivityIndicator />;
  if (error) return <Text>Erro: {error}</Text>;
  
  return (
    <FlatList
      data={users}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      keyExtractor={item => item.id.toString()}
    />
  );
}

Raridade: Muito Comum Dificuldade: Média


18. O que é AsyncStorage e como você o usa?

Resposta: AsyncStorage é um sistema de armazenamento chave-valor simples e assíncrono para React Native.

  • Casos de Uso: Preferências do usuário, tokens, pequenos dados
  • Não para: Grandes conjuntos de dados, consultas complexas (use SQLite em vez disso)
import AsyncStorage from '@react-native-async-storage/async-storage';

// Salvar dados
const saveData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
    console.error('Erro ao salvar dados:', error);
  }
};

// Salvar objeto
const saveUser = async (user) => {
  try {
    const jsonValue = JSON.stringify(user);
    await AsyncStorage.setItem('user', jsonValue);
  } catch (error) {
    console.error('Erro ao salvar usuário:', error);
  }
};

// Ler dados
const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value !== null ? value : null;
  } catch (error) {
    console.error('Erro ao ler dados:', error);
  }
};

// Ler objeto
const getUser = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('user');
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (error) {
    console.error('Erro ao ler usuário:', error);
  }
};

// Remover dados
const removeData = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
  } catch (error) {
    console.error('Erro ao remover dados:', error);
  }
};

// Limpar tudo
const clearAll = async () => {
  try {
    await AsyncStorage.clear();
  } catch (error) {
    console.error('Erro ao limpar o armazenamento:', error);
  }
};

Raridade: Muito Comum Dificuldade: Fácil


19. Qual é a diferença entre FlatList e ScrollView?

Resposta:

  • ScrollView:
    • Renderiza todos os filhos de uma vez
    • Bom para listas pequenas
    • Uso intensivo de memória para listas grandes
  • FlatList:
    • Renderiza apenas os itens visíveis (carregamento preguiçoso)
    • Eficiente para listas grandes
    • Otimizações integradas
// ScrollView - renderiza tudo
<ScrollView>
  {items.map(item => (
    <View key={item.id}>
      <Text>{item.name}</Text>
    </View>
  ))}
</ScrollView>

// FlatList - renderiza apenas os itens visíveis
<FlatList
  data={items}
  renderItem={({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  )}
  keyExtractor={item => item.id}
  // Otimizações de desempenho
  initialNumToRender={10}
  maxToRenderPerBatch={10}
  windowSize={5}
/>

Raridade: Muito Comum Dificuldade: Fácil


20. Como você lida com formulários e entrada de usuário?

Resposta: Use componentes controlados com estado.

import { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});
  
  const validate = () => {
    const newErrors = {};
    
    if (!email) {
      newErrors.email = 'Email é obrigatório';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      newErrors.email = 'Email inválido';
    }
    
    if (!password) {
      newErrors.password = 'Senha é obrigatória';
    } else if (password.length < 6) {
      newErrors.password = 'A senha deve ter pelo menos 6 caracteres';
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  
  const handleSubmit = () => {
    if (validate()) {
      console.log('Formulário enviado:', { email, password });
      // Enviar para a API
    }
  };
  
  return (
    <View>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      {errors.email && <Text style={{ color: 'red' }}>{errors.email}</Text>}
      
      <TextInput
        placeholder="Senha"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      {errors.password && <Text style={{ color: 'red' }}>{errors.password}</Text>}
      
      <Button title="Login" onPress={handleSubmit} />
    </View>
  );
}

Raridade: Muito Comum Dificuldade: Média


Newsletter subscription

Dicas de carreira semanais que realmente funcionam

Receba as últimas ideias diretamente na sua caixa de entrada

Sua Próxima Entrevista Está a Apenas um Currículo de Distância

Crie um currículo profissional e otimizado em minutos. Não são necessárias habilidades de design—apenas resultados comprovados.

Criar meu currículo

Compartilhar esta publicação

Reduza o Tempo de Escrita do Currículo em 90%

O candidato a emprego médio gasta mais de 3 horas formatando um currículo. Nossa IA faz isso em menos de 15 minutos, levando você à fase de candidatura 12 vezes mais rápido.