Introdução

Com a crescente popularidade do desenvolvimento de aplicações web, o React se destaca como uma das bibliotecas mais utilizadas para construção de interfaces de usuário. Sua abordagem baseada em componentes permite criar aplicações escaláveis e de fácil manutenção. Este artigo aborda a criação de componentes funcionais utilizando Hooks, uma forma moderna e eficiente de gerenciar estado e efeitos colaterais em aplicações React.

Contexto ou Teoria

O React foi desenvolvido pelo Facebook e lançado em 2013, revolucionando a forma como as interfaces de usuário são construídas. Uma de suas principais características é a capacidade de dividir uma interface em componentes reutilizáveis, cada um responsável por uma parte específica da UI. Com a introdução dos Hooks na versão 16.8, o React permitiu que desenvolvedores utilizassem estado e outras funcionalidades sem a necessidade de classes, simplificando o código e melhorando a legibilidade.

Os Hooks mais comuns incluem o useState, que permite gerenciar o estado local do componente, e o useEffect, que permite realizar efeitos colaterais, como chamadas a APIs ou manipulação do DOM. A utilização de componentes funcionais com Hooks não só torna o código mais limpo, mas também facilita a composição de lógica entre componentes.

Demonstrações Práticas

A seguir, vamos construir um componente funcional simples que utiliza o Hook useState para gerenciar um contador. Esse exemplo vai mostrar como você pode facilmente criar interações dinâmicas em sua aplicação.

import React, { useState } from 'react';

const Contador = () => {
    // Declarando o estado inicial com o Hook useState
    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;

No código acima, o componente Contador utiliza o Hook useState para criar um estado que armazena o valor do contador. As funções incrementar e decrementar são acionadas quando os botões são clicados, permitindo que o contador aumente ou diminua conforme a interação do usuário.

Agora, vamos ver um exemplo de como utilizar o Hook useEffect para realizar uma chamada a uma API e exibir dados em nosso componente. Vamos criar um componente que busca uma lista de usuários de uma API pública.

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

const ListaUsuarios = () => {
    const [usuarios, setUsuarios] = useState([]);
    const [loading, setLoading] = useState(true);

    // Chamando a API quando o componente é montado
    useEffect(() => {
        const fetchUsuarios = async () => {
            const response = await fetch('https://jsonplaceholder.typicode.com/users');
            const data = await response.json();
            setUsuarios(data);
            setLoading(false);
        };

        fetchUsuarios();
    }, []); // O array vazio [] garante que o efeito seja executado apenas uma vez

    if (loading) {
        return 
Carregando...
;
    }

    return (
        

            {usuarios.map(usuario => (
                
{usuario.name}
            ))}
        
    );
};

export default ListaUsuarios;

Neste exemplo, o componente ListaUsuarios utiliza useEffect para buscar dados de usuários assim que o componente é montado. A função fetchUsuarios realiza a chamada à API e atualiza o estado dos usuários, que são então exibidos em uma lista. Enquanto os dados estão sendo carregados, uma mensagem de “Carregando…” é mostrada ao usuário.

Dicas ou Boas Práticas

 
• Utilize componentes funcionais sempre que possível, pois eles tendem a ser mais simples e mais fáceis de entender.

 

• Evite lógica complexa dentro do useEffect. Se necessário, extraia funções auxiliares para manter o código limpo.

 

• Use o array de dependências do useEffect para controlar quando o efeito deve ser executado. Isso pode evitar chamadas desnecessárias.

 

• Utilize useMemo e useCallback para otimizar o desempenho de componentes que realizam cálculos pesados ou que passam funções como props.

 

• Considere o uso de bibliotecas como React Query para gerenciar o estado de dados assíncronos, simplificando o fluxo de chamadas à API.

Conclusão com Incentivo à Aplicação

Com o conhecimento sobre componentes funcionais e Hooks, você está pronto para criar aplicações React mais modernas e eficientes. A utilização de useState e useEffect é fundamental para gerenciar estado e efeitos colaterais, permitindo que você desenvolva interações ricas e dinâmicas.

Incentivamos você a praticar criando seus próprios componentes e explorando a biblioteca React ao máximo. Ao implementar o que aprendeu, você ganhará confiança e habilidade, tornando-se um desenvolvedor mais completo e preparado para enfrentar desafios reais.

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!