Props e Hooks: Seu Conhecimento em Ação

Se você estava esperando por conceitos complexos e novos, temos uma ótima notícia. Esta é a seção mais fácil do guia, pois não há nada de novo para aprender aqui. A lógica para gerenciar o estado, o ciclo de vida e o fluxo de dados dos seus componentes é exatamente a mesma que você já domina no React para a web.

A Melhor Parte: Você Já Sabe Isso!

É isso mesmo. A forma como você declara e usa Props, e o funcionamento dos hooks useState, useEffect e useContext são idênticos no React Native.

Props continuam sendo a forma de passar dados de um componente pai para um filho, customizando seu comportamento e aparência.
useState ainda é o hook fundamental para adicionar estado a um componente funcional, fazendo com que ele re-renderize quando o estado muda.
useEffect continua sendo a ferramenta para lidar com "efeitos colaterais" (side effects), como buscar dados de uma API quando a tela carrega ou executar uma ação sempre que um estado específico é alterado.
useContext segue como a solução para evitar "prop drilling" e compartilhar dados globais, como informações de um usuário logado ou um tema de cores.

O nosso único trabalho nesta seção é aplicar esse conhecimento aos componentes nativos que aprendemos nos tópicos anteriores.

Colocando em Prática

Vamos criar um exemplo clássico, um contador, para ver como esses conceitos se unem de forma natural no ambiente nativo. Neste exemplo, vamos:

Usar useState para controlar o número do contador.
Usar TouchableOpacity para criar os botões de incrementar e decrementar.
Usar Text para exibir o valor atual do contador.
Usar useEffect para exibir uma mensagem no console sempre que o contador for alterado.

Como você pode ver, a lógica dentro da função do componente é puro React. A única diferença real é que, no final, retornamos componentes como <View> e <Text> em vez de <div> e <p>.

Com essa base sólida, estamos prontos para avançar para um tópico que é verdadeiramente específico do mundo mobile: a navegação entre telas.