Introdução ao React: Criando Componentes Funcionais com Hooks

Introdução

React se tornou uma das bibliotecas mais populares para a construção de interfaces de usuário devido à sua eficiência e flexibilidade. Um dos maiores atrativos do React é a capacidade de criar componentes reutilizáveis e dinâmicos. Neste artigo, vamos explorar como criar componentes funcionais utilizando Hooks, uma abordagem moderna que simplifica o gerenciamento de estado e efeitos colaterais em aplicações React.

Contexto ou Teoria

React foi desenvolvido pelo Facebook e introduzido ao público em 2013. Desde então, a biblioteca evoluiu significativamente, especialmente com a adição dos Hooks em 2018. Os Hooks permitem que você use o estado e outras funcionalidades do React sem escrever uma classe. Isso facilita a reutilização de lógica de estado entre componentes e melhora a legibilidade do código.

Os dois Hooks mais comuns são o useState, para gerenciar o estado local, e o useEffect, que lida com efeitos colaterais, como chamadas de API ou manipulações do DOM. A combinação desses Hooks permite criar componentes funcionais poderosos e dinâmicos.

Demonstrações Práticas

Vamos criar um componente simples que conta cliques de um botão usando os Hooks useState e useEffect.

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

const Contador = () => {
  // Declara uma nova variável de estado chamada "contador"
  const [contador, setContador] = useState(0);

  // Este efeito será chamado sempre que o valor de "contador" mudar
  useEffect(() => {
    document.title = `Você clicou ${contador} vezes`;
  }, [contador]); // O array de dependências indica que o efeito depende do "contador"

  return (
    

      
Você clicou {contador} vezes
       setContador(contador + 1)}>
        Clique aqui
      
    
  );
};

export default Contador;

No exemplo acima, nós:

• Importamos o React e os Hooks necessários.
• Declaramos um estado chamado contador usando useState.
• Usamos useEffect para atualizar o título da página sempre que o contador mudar.
• Criamos um botão que, ao ser clicado, incrementa o contador.

Agora, vamos criar um segundo componente que exibe uma lista de itens e permite que o usuário adicione novos itens a essa lista.

import React, { useState } from 'react';

const ListaDeItens = () => {
  const [itens, setItens] = useState([]);
  const [novoItem, setNovoItem] = useState('');

  const adicionarItem = () => {
    if (novoItem.trim() !== '') {
      setItens([...itens, novoItem]);
      setNovoItem(''); // Limpa o campo de entrada
    }
  };

  return (
    

      
Lista de Itens
       setNovoItem(e.target.value)} 
        placeholder="Adicione um novo item"
      />
      Adicionar
      

        {itens.map((item, index) => (
          
{item}
        ))}
      
    
  );
};

export default ListaDeItens;

Neste segundo exemplo:

• Declaramos um estado para a lista de itens e outro para o novo item que será adicionado.
• Implementamos uma função que adiciona o novo item à lista quando o botão é clicado.
• Usamos o método map para renderizar a lista de itens na tela.

Dicas ou Boas Práticas

• Utilize useCallback para memorizar funções que são passadas como props para evitar re-renderizações desnecessárias.
• Aproveite o useMemo para memorizar valores computados e otimizar o desempenho.
• Organize seu código em arquivos separados para cada componente e mantenha a lógica de estado e efeitos bem definidos.
• Teste seus componentes utilizando ferramentas como React Testing Library para garantir que eles funcionem conforme o esperado.
• Considere o uso de TypeScript para adicionar tipos estáticos, melhorando a segurança e a legibilidade do código.

Conclusão com Incentivo à Aplicação

Compreender e aplicar os conceitos de componentes funcionais e Hooks no React é essencial para qualquer desenvolvedor que deseje criar aplicações modernas e eficientes. Ao praticar a construção de componentes como os apresentados, você estará no caminho certo para se tornar um expert em React. Experimente criar novos componentes e adicionar funcionalidades como autenticação, chamadas de API e gerenciamento de estado global utilizando o Context API ou Redux.

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!