Introdução

O React se tornou uma das bibliotecas mais populares para a construção de interfaces de usuário modernas. Com sua abordagem baseada em componentes, permite uma maneira eficaz de desenvolver aplicações web interativas e escaláveis. Neste artigo, vamos explorar como criar componentes funcionais utilizando Hooks, uma das adições mais poderosas do React, que facilitam o gerenciamento de estado e efeitos colaterais em aplicações funcionais.

Contexto ou Teoria

O React foi criado pelo Facebook em 2013 e, desde então, evoluiu significativamente. Antes da introdução dos Hooks em 2018, a única maneira de gerenciar estado em componentes funcionais era por meio de classes. Com os Hooks, agora é possível manter o estado e executar efeitos colaterais diretamente em componentes funcionais, simplificando o código e aumentando sua legibilidade.

Os Hooks são funções que permitem “ligar” o estado e outras funcionalidades do React a componentes funcionais. Os dois Hooks mais comuns são o useState, que permite gerenciar o estado local, e o useEffect, que permite realizar efeitos colaterais, como chamadas a APIs e manipulações do DOM.

Demonstrações Práticas

Para entender como os Hooks funcionam, vamos criar um componente funcional simples que utiliza o useState e o useEffect.

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

const Contador = () => {
  // Declara uma variável de estado chamada "contagem" e uma função para atualizá-la
  const [contagem, setContagem] = useState(0);

  // useEffect para logar a contagem cada vez que ela é atualizada
  useEffect(() => {
    console.log(`Contagem atual: ${contagem}`);
  }, [contagem]); // O efeito depende da contagem

  return (
    

      
Contagem: {contagem}
       setContagem(contagem + 1)}>Incrementar
       setContagem(contagem - 1)}>Decrementar
    
  );
};

export default Contador;

No exemplo acima, criamos um componente chamado Contador que possui um estado chamado contagem. Usamos o Hook useState para inicializar a contagem em 0 e a função setContagem para atualizá-la. O Hook useEffect é utilizado para logar a contagem atual sempre que ela é alterada.

Agora, vamos adicionar um segundo componente que busca dados de uma API e os exibe.

const DadosAPI = () => {
  const [dados, setDados] = useState([]);
  const [carregando, setCarregando] = useState(true);

  useEffect(() => {
    const fetchDados = async () => {
      const resposta = await fetch('https://jsonplaceholder.typicode.com/posts');
      const dadosJson = await resposta.json();
      setDados(dadosJson);
      setCarregando(false);
    };

    fetchDados();
  }, []); // O efeito roda apenas uma vez após a montagem do componente

  if (carregando) {
    return 
Carregando dados...
;
  }

  return (
    

      
Dados da API
      

        {dados.map(dado => (
          
{dado.title}
        ))}
      
    
  );
};

export default DadosAPI;

No componente DadosAPI, utilizamos o useEffect para buscar dados de uma API externa. O estado carregando é utilizado para gerenciar o estado de carregamento. A função fetchDados é chamada assim que o componente é montado, e os dados recebidos são armazenados no estado dados. O componente renderiza uma lista de títulos assim que os dados são carregados.

Dicas ou Boas Práticas

 
• Use nomes descritivos para seus estados e funções para facilitar a leitura do código.

 

• Evite efeitos colaterais desnecessários; sempre que possível, coloque dependências corretas no array do useEffect.

 

• Utilize React.memo para otimizar componentes que não precisam ser re-renderizados em cada atualização de estado.

 

• Teste seus componentes utilizando ferramentas como Jest e React Testing Library para garantir que estão funcionando como esperado.

 

• Considere dividir componentes grandes em componentes menores para melhorar a manutenibilidade e reutilização.

Conclusão com Incentivo à Aplicação

Com a compreensão de como criar componentes funcionais utilizando Hooks, você está pronto para desenvolver aplicações React mais eficientes e organizadas. A implementação de useState e useEffect em seus projetos permitirá que você escreva código mais limpo e fácil de manter. Explore mais sobre outros Hooks disponíveis no React e experimente criar suas próprias soluções.

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!