Explorando o useState e useEffect no React.js
- #React
O React.js é uma biblioteca JavaScript popular para construir interfaces de usuário, e seus hooks são ferramentas poderosas que permitem adicionar estado e efeitos colaterais a componentes funcionais. Dois dos hooks mais utilizados são useState e useEffect, que permitem gerenciar estados e executar efeitos colaterais, respectivamente.
O que são useState e useEffect?
O useState é um hook que permite adicionar estado local a componentes funcionais. Ele retorna um par: o estado atual e uma função que permite atualizá-lo. Já o useEffect é um hook que permite executar efeitos colaterais, como buscar dados, diretamente em componentes funcionais.
Trago um exemplo de um projeto meu recente na imagem a baixo no qual eu os utilizei o useState para Inicializar dois estados: agent para armazenar os dados do agente e loading para gerenciar o estado de carregamento. Esses dados de agente seriam dados da API do jogo Valorant e por meio do id a página de agentes apresentava seus dados.
Já o useEffect busca os dados do agente quando o componente é montado ou quando o id muda. Se a resposta for bem-sucedida, os dados são armazenados no estado agent. Caso ocorra um erro, uma mensagem de erro é exibida. Por fim, com uma resposta ok e os dados armazenados ocorre o retorno dos mesmos em tela (não coloquei essa parte no print, mas o código está open source no meu github).
Os hooks useState e useEffect são essenciais para qualquer desenvolvedor React. Eles permitem criar componentes funcionais robustos e eficientes, facilitando o desenvolvimento e a manutenção de aplicações complexas. Ao entender e aplicar esses hooks, podemos melhorar significativamente a qualidade e a organização do nosso código.
❤️ 📚 💻
Link do github: https://github.com/fransilva0/valorant-page
Linkedin: https://www.linkedin.com/in/francileudo-oliveira/
