Introdução

O React se consolidou como uma das bibliotecas mais populares para a construção de interfaces de usuário dinâmicas e eficientes. Com sua abordagem baseada em componentes, permite que desenvolvedores criem aplicações web escaláveis e de fácil manutenção. Neste artigo, vamos explorar como construir componentes funcionais utilizando Hooks, uma das funcionalidades mais poderosas e modernas do React.

Contexto ou Teoria

O React foi desenvolvido pelo Facebook e lançado como código aberto em 2013. Desde então, ele evoluiu significativamente, e uma das suas inovações mais impactantes foram os Hooks, introduzidos na versão 16.8. Hooks são funções que permitem que você “ligue” o estado e os ciclos de vida do React a componentes funcionais, que antes eram limitados a componentes de classe. Essa mudança não apenas simplificou a estrutura do código, mas também promoveu uma forma mais funcional e reativa de programar.

Os principais Hooks que vamos abordar são o useState e o useEffect. O useState permite adicionar estado a componentes funcionais, enquanto o useEffect é utilizado para lidar com efeitos colaterais, como chamadas a APIs e manipulação de eventos.

Demonstrações Práticas

Vamos começar criando um componente funcional simples que utiliza o useState para gerenciar um contador. Em seguida, vamos adicionar um efeito colateral com o useEffect para exibir a contagem no console sempre que o valor mudar.

import React, { useState, useEffect } from 'react';

const Contador = () => {
  // Declarando uma nova variável de estado, "contagem"
  const [contagem, setContagem] = useState(0);

  // useEffect para executar um efeito colateral
  useEffect(() => {
    console.log(`Contagem atual: ${contagem}`);

    // Limpando o efeito ao desmontar o componente
    return () => {
      console.log('Contador desmontado');
    };
  }, [contagem]); // Dependência que dispara o efeito

  return (
    

      
Contador: {contagem}
       setContagem(contagem + 1)}>Incrementar
       setContagem(contagem - 1)}>Decrementar
       setContagem(0)}>Reiniciar
    
  );
};

export default Contador;

Neste exemplo, criamos um componente chamado Contador. Usamos useState para definir a contagem inicial como 0. O useEffect é configurado para executar um console log sempre que contagem mudar. Além disso, implementamos um retorno no useEffect para limpar o efeito quando o componente é desmontado.

Agora, vamos construir uma funcionalidade um pouco mais complexa que consome uma API fictícia e exibe dados de um usuário. Neste caso, vamos usar o useEffect para fazer a chamada à API e o useState para armazenar os dados retornados.

import React, { useState, useEffect } from 'react';

const Usuario = () => {
  const [usuario, setUsuario] = useState(null);
  const [carregando, setCarregando] = useState(true);
  const [erro, setErro] = useState(null);

  useEffect(() => {
    const fetchUsuario = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
        if (!response.ok) {
          throw new Error('Erro ao buscar o usuário');
        }
        const data = await response.json();
        setUsuario(data);
      } catch (error) {
        setErro(error.message);
      } finally {
        setCarregando(false);
      }
    };

    fetchUsuario();
  }, []); // O array vazio indica que o efeito roda apenas uma vez após a montagem

  if (carregando) return 
Carregando...
;
  if (erro) return 
Erro: {erro}
;

  return (
    

      
Usuário: {usuario.name}
      
Email: {usuario.email}
      
Telefone: {usuario.phone}
    
  );
};

export default Usuario;

No componente Usuario, utilizamos useState para gerenciar o estado do usuário, o estado de carregamento e o erro. O useEffect é usado para fazer a chamada à API assim que o componente é montado. Estamos aproveitando a sintaxe assíncrona para lidar com a chamada da API, o que torna o código mais limpo e fácil de entender.

Dicas ou Boas Práticas

 
• Mantenha seus componentes pequenos e focados em uma única responsabilidade. Isso facilita a manutenção e a reutilização.

 

• Utilize hooks personalizados para encapsular lógica comum e reutilizável entre componentes.

 

• Evite efeitos colaterais desnecessários. Sempre que possível, use o array de dependências do useEffect para otimizar a execução de efeitos.

 

• Use o console para depuração durante o desenvolvimento, mas remova logs desnecessários antes de colocar o projeto em produção.

 

• Considere utilizar TypeScript para adicionar tipagem estática ao seu código, aumentando a segurança e a legibilidade.

Conclusão com Incentivo à Aplicação

Ao longo deste artigo, exploramos como construir componentes funcionais no React utilizando Hooks, uma abordagem moderna e poderosa para o desenvolvimento de interfaces. A prática com o useState e useEffect permite que você crie aplicações mais reativas e eficientes, além de melhorar a organização do seu código.

Agora é hora de aplicar o que você aprendeu. Experimente criar seus próprios componentes, brinque com diferentes estados e efeitos e veja como isso pode transformar sua experiência de desenvolvimento. Com o React, as possibilidades são infinitas!

Está desenvolvendo um projeto digital e precisa de um site moderno, performático e bem estruturado?
Eu posso te ajudar a transformar essa ideia em uma solução completa — com foco em performance, design e funcionalidade.
Acesse yurideveloper.com.br ou chame no WhatsApp: (37) 99670-7290. Vamos criar algo incrível juntos!