“`html

Introdução

O React se tornou uma das bibliotecas mais populares para a criação de interfaces de usuário. Com sua abordagem baseada em componentes, permite que os desenvolvedores construam aplicativos web de forma modular e escalável. Neste artigo, vamos explorar como criar componentes funcionais utilizando Hooks, uma das funcionalidades mais poderosas do React, que simplifica o gerenciamento de estado e efeitos colaterais em aplicações.

Contexto ou Teoria

O React foi desenvolvido pelo Facebook e lançado como código aberto em 2013. Desde então, sua popularidade cresceu rapidamente, principalmente pela sua capacidade de criar interfaces de usuário reativas e dinâmicas. Os componentes são a base do React, permitindo que os desenvolvedores dividam a interface em partes reutilizáveis. Com a introdução dos Hooks no React 16.8, tornou-se possível usar estado e outras características do React sem ter que escrever uma classe.

Os Hooks mais comuns incluem useState e useEffect. O useState permite que o componente mantenha seu estado, enquanto o useEffect permite que você realize efeitos colaterais, como chamadas de API ou assinaturas de eventos. Esta abordagem funcional é mais concisa e legível, tornando o código mais fácil de entender e manter.

Demonstrações Práticas

Vamos criar um componente funcional simples que utiliza os Hooks useState e useEffect. Este componente será um contador que incrementa o valor ao clicar em um botão e atualiza o título da página sempre que o contador altera seu valor.

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

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

    // Este efeito será executado sempre que o valor de "contador" mudar
    useEffect(() => {
        document.title = `Contador: ${contador}`;
    }, [contador]); // O array de dependências garante que o efeito só execute quando "contador" mudar

    return (
        

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

export default Contador;

Este código define um componente Contador que possui um estado chamado contador. A função setContador é utilizada para atualizar o estado. O useEffect é usado para atualizar o título da página sempre que o contador muda. Ao clicar no botão, o contador é incrementado, e a interface é atualizada automaticamente.

Agora, vamos adicionar um segundo componente que irá mostrar os últimos cinco valores do contador utilizando o Hook useReducer para gerenciar um histórico dos valores.

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

const initialState = {
    historico: [],
};

const reducer = (state, action) => {
    switch (action.type) {
        case 'ADICIONAR':
            return { 
                historico: [...state.historico, action.payload].slice(-5) // Mantém apenas os últimos 5
            };
        default:
            return state;
    }
};

const ContadorComHistorico = () => {
    const [contador, setContador] = useState(0);
    const [state, dispatch] = useReducer(reducer, initialState);

    useEffect(() => {
        document.title = `Contador: ${contador}`;
    }, [contador]);

    const incrementar = () => {
        setContador(contador + 1);
        dispatch({ type: 'ADICIONAR', payload: contador + 1 });
    };

    return (
        

            
Contador: {contador}
            Incrementar
            
Histórico dos Últimos 5 Valores:
            

                {state.historico.map((valor, index) => (
                    
{valor}
                ))}
            
        
    );
}

export default ContadorComHistorico;

Neste segundo componente, ContadorComHistorico, utilizamos o useReducer para gerenciar o estado do histórico dos últimos cinco valores do contador. Sempre que o contador é incrementado, o novo valor é adicionado ao histórico e, se houver mais de cinco entradas, as mais antigas são removidas.

Dicas ou Boas Práticas

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

 

• Use Hooks para gerenciar o estado e efeitos colaterais, mantendo seu código limpo e fácil de entender.

 

• Evite lógica complexa nos componentes. Use funções auxiliares ou contextos para separar a lógica do estado e da UI.

 

• Considere o uso do React.memo para componentes que não precisam ser re-renderizados a cada atualização de estado.

 

• Teste seus componentes individualmente com ferramentas como Jest e React Testing Library para garantir que funcionem conforme esperado.

Conclusão com Incentivo à Aplicação

Você agora tem uma compreensão básica de como criar componentes funcionais no React utilizando Hooks. Esta abordagem não só facilita o gerenciamento de estado e efeitos colaterais, mas também ajuda a manter seu código limpo e modular. A prática é essencial para o domínio do React; portanto, comece a aplicar esses conceitos em seus projetos e experimente criar aplicações mais