Introdução

O React se tornou uma das bibliotecas mais populares para o desenvolvimento de interfaces de usuário, permitindo a criação de aplicações web dinâmicas e interativas. A capacidade de construir componentes reutilizáveis e gerenciar o estado de forma eficaz é o que torna o React uma escolha excelente para desenvolvedores iniciantes e intermediários. Este artigo explora como criar componentes funcionais e utilizar hooks, elementos essenciais para um desenvolvimento moderno e eficiente com React.

Contexto ou Teoria

O React foi desenvolvido pelo Facebook e lançado em 2013. Desde então, ele revolucionou a forma como as interfaces de usuário são construídas. Um dos principais conceitos do React é a construção de componentes, que são blocos autônomos e reutilizáveis de código que representam partes da interface de um aplicativo. Com o advento dos hooks no React 16.8, o desenvolvimento de componentes funcionais se tornou ainda mais poderoso, permitindo que os desenvolvedores gerenciem o estado e os efeitos colaterais sem a necessidade de classes.

Os principais hooks disponíveis incluem:

 
• useState: permite adicionar estado a componentes funcionais.

 

• useEffect: permite realizar efeitos colaterais, como chamadas API ou manipulação do DOM.

 

• useContext: facilita a gestão de estado global entre componentes.

Demonstrações Práticas

Vamos criar um exemplo simples de um contador que utiliza componentes funcionais e o hook useState.

import React, { useState } from 'react';

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

  return (
    

      
Contador: {contador}
       setContador(contador + 1)}>Incrementar
       setContador(contador - 1)}>Decrementar
    
  );
};

export default Contador;

No exemplo acima, criamos um componente chamado Contador. Utilizamos o hook useState para gerenciar o estado do contador. Cada vez que o usuário clica nos botões, o estado é atualizado, e o componente re-renderiza para refletir esse novo valor.

Agora, vamos adicionar um efeito colateral que atualiza o título da página sempre que o contador muda, utilizando o hook useEffect.

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

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

  useEffect(() => {
    document.title = `Contador: ${contador}`;
  }, [contador]); // O efeito só será executado se "contador" mudar

  return (
    

      
Contador: {contador}
       setContador(contador + 1)}>Incrementar
       setContador(contador - 1)}>Decrementar
    
  );
};

export default ContadorComEfeito;

No código acima, o useEffect é utilizado para alterar o título da página sempre que o contador é atualizado. O segundo argumento do useEffect é um array de dependências, que indica que o efeito deve ser executado apenas quando o valor de contador muda.

Dicas ou Boas Práticas

 
• Utilize componentes funcionais sempre que possível para aproveitar a simplicidade e a legibilidade do código.

 

• Evite lógica complexa dentro do useEffect. Mantenha as funções puras e separadas.

 

• Utilize o useCallback e useMemo para otimizar o desempenho, evitando re-renderizações desnecessárias.

 

• Organize seus componentes em pastas e arquivos para facilitar a manutenção e a escalabilidade do projeto.

Conclusão com Incentivo à Aplicação

O React oferece uma abordagem poderosa e flexível para o desenvolvimento de interfaces de usuário. Com o uso de componentes funcionais e hooks, você pode criar aplicações reativas e de fácil manutenção. Experimente implementar o que aprendeu neste artigo em seus próprios projetos e veja como a simplicidade e a eficiência do React podem transformar sua forma de desenvolver.

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!