Introdução

O React se tornou uma das bibliotecas mais populares para o desenvolvimento de interfaces de usuário. A sua abordagem baseada em componentes permite que desenvolvedores criem interfaces reutilizáveis e escaláveis de forma eficiente. Neste artigo, exploraremos como criar componentes funcionais utilizando hooks, uma das funcionalidades mais inovadoras do React que simplifica o gerenciamento de estado e ciclo de vida.

Contexto ou Teoria

Com a evolução do React, os componentes funcionais ganharam destaque em relação aos componentes de classe. Os hooks foram introduzidos na versão 16.8 do React, permitindo que os desenvolvedores utilizem estado e outros recursos do React sem precisar de classes. Os hooks mais comuns incluem o useState e o useEffect, que permitem gerenciar o estado local e efeitos colaterais, respectivamente.

Os componentes funcionais são mais simples e promovem uma sintaxe mais limpa. Além disso, a utilização de hooks facilita a reutilização de lógica entre componentes. Vamos ver como esses conceitos se aplicam na prática.

Demonstrações Práticas

Para ilustrar como criar um componente funcional com hooks, vamos desenvolver um contador simples que incrementa e decrementa um número.

import React, { useState } from 'react';

const Contador = () => {
  // Declarando uma variável de estado chamada 'contador' com valor inicial 0
  const [contador, setContador] = useState(0);

  // Função para incrementar o contador
  const incrementar = () => {
    setContador(contador + 1);
  };

  // Função para decrementar o contador
  const decrementar = () => {
    setContador(contador - 1);
  };

  return (
    

      
Contador: {contador}
      Incrementar
      Decrementar
    
  );
};

export default Contador;

Neste exemplo, utilizamos o hook useState para criar uma variável de estado chamada ‘contador’. As funções incrementar e decrementar atualizam esse estado quando os botões são clicados. A interface é atualizada automaticamente sempre que o estado muda, demostrando a reatividade do React.

Agora, vamos adicionar um efeito colateral para mostrar uma mensagem no console sempre que o contador for alterado.

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

const ContadorComEfeito = () => {
  const [contador, setContador] = useState(0);

  useEffect(() => {
    console.log(`O contador foi atualizado: ${contador}`);
  }, [contador]); // O efeito é executado sempre que 'contador' muda

  const incrementar = () => {
    setContador(contador + 1);
  };

  const decrementar = () => {
    setContador(contador - 1);
  };

  return (
    

      
Contador: {contador}
      Incrementar
      Decrementar
    
  );
};

export default ContadorComEfeito;

Com o useEffect, estamos escutando mudanças no estado do contador e registrando uma mensagem no console quando isso acontece. Essa é uma maneira útil de lidar com efeitos colaterais, como chamadas de API ou manipulações de DOM.

Dicas ou Boas Práticas

 
• Utilize componentes funcionais sempre que possível, pois eles são mais leves e fáceis de entender.

 

• Evite lógica complexa dentro do JSX; mantenha a renderização limpa e delegue lógica para funções auxiliares.

 

• Use o useEffect com cuidado, especialmente ao lidar com dependências para evitar loops infinitos.

 

• Organize seu código em componentes menores e reutilizáveis, facilitando a manutenção e a legibilidade.

 

• Documente suas funções e componentes para que outros desenvolvedores (ou você mesmo no futuro) possam entender facilmente o que cada parte do código faz.

Conclusão com Incentivo à Aplicação

Com o conhecimento dos componentes funcionais e hooks do React, você agora tem as ferramentas necessárias para construir aplicações web dinâmicas e modernas. A prática é essencial, então comece a aplicar esses conceitos em seus projetos pessoais e profissionais.

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!