Programação Mobile Coding
Prof. Victor Sotero
Aula 07 – Utilizando Hooks
Hooks
• Recurso criado para melhorar o código e seus componentes;
• Evita renderização desnecessárias e cálculos desnecessários
que poderiam deixar a aplicação um pouco lenta;
• Eles também ajudam a organizar a lógica utilizada dentro dos
componentes.
Prof. Victor Sotero
Hooks - useState
• Função fornecida pelo react que permite declarar uma
variável de estado para um componente funcional;
• A função useState retorna um array com duas posições: o
valor atual do estado e a função que irá atualizá-lo.
Prof. Victor Sotero
UseState
Prof. Victor Sotero
UseState
Prof. Victor Sotero
O que o useState faz?
• Declara uma variável state;
• Nos exemplos anteriores utilizamos as variáveis nome e
quantidade;
• O useState tem a mesma capacidade de utilizar o [Link];
• Além disso, retorna um par de valores: o estado atual e a função
que irá mudar seu estado.
Prof. Victor Sotero
Estado e Renderização
• Toda vez que um componente muda, ele é renderizado;
• Isso implica em dizer que a função componente vai ser
chamada novamente;
• A nova versão da renderização vai gerar o estado atual do
componente;
• No exemplo do contador, toda vez que a QUANTIDADE
muda, o componente é re-renderizado para mostrar o novo
valor na tela.
Prof. Victor Sotero
Effect Hook
• Permite executar efeitos colaterais em componentes
funcionais;
• A seguir iremos refazer o exemplo anterior só que com uma
função a mais: ele irá modificar o título da aplicação (efeito
colateral);
• Buscar dados e configurar subscrições são exemplos de
efeitos colaterais;
Prof. Victor Sotero
Effect Hook
Prof. Victor Sotero
Effect Hook
• Vamos entender o código anterior:
• Declaramos o state quantidade e informamos ao React que
precisamos usar um efeito;
• Passamos uma função para o Hook Effect e lá dizemos que
ele precisa modificar o título do documento da API;
• Quando o React renderizar o nosso componente ele vai se
lembrar do efeito que usamos e assim executar os efeitos
colaterais depois de atualizar o DOM
Prof. Victor Sotero
Exemplo de CEP
• Vamos agora fazer um exemplo na prática utilizando Hooks.
• No nosso exemplo vamos fazer um buscados de CEP utilizando a
api do IBGE;
• Talvez, através do snack expo a aplicação não funcione. Por isso é
aconselhável utilizar o VS Code;
• Instale todas as dependências necessárias:
npm install @babel/runtime
npm install axios
Prof. Victor Sotero
Primeira Parte
• Dentro do seu projeto, crie uma pasta src/services e insira
nesse diretório um arquivo [Link]. Esse arquivo deve conter o
código que vai apontar para a api do IBGE;
Prof. Victor Sotero
Segunda Parte – Criando a função limpar
Prof. Victor Sotero
Terceira parte – Função Buscar
Prof. Victor Sotero
Quarta parte – Criando useState e useRef
Prof. Victor Sotero
Quinta parte – Botão limpar e botão buscar
Prof. Victor Sotero
Sexta parte – chamando useState para mudar
o CEP
Prof. Victor Sotero
• Clique aqui para ter acesso ao projeto completo
Prof. Victor Sotero