Introdução

O React se tornou uma das bibliotecas JavaScript mais populares para a construção de interfaces de usuário (UI). Sua abordagem baseada em componentes e a introdução dos Hooks trouxeram uma nova forma de gerenciar o estado e os efeitos colaterais em aplicações web. Este artigo é voltado para desenvolvedores iniciantes e intermediários que desejam entender como utilizar React e seus Hooks para criar aplicações web dinâmicas e eficientes.

Contexto ou Teoria

React é uma biblioteca desenvolvida pelo Facebook que permite criar interfaces de usuário de forma declarativa. A introdução dos Hooks no React 16.8 trouxe uma maneira mais intuitiva de gerenciar o estado e os efeitos colaterais sem a necessidade de classes. Os Hooks mais utilizados são:

• useState: Permite adicionar estado a componentes funcionais.
• useEffect: Permite executar efeitos colaterais em componentes funcionais.
• useContext: Facilita o gerenciamento de estado global entre componentes.

A combinação de componentes funcionais e Hooks resulta em um código mais limpo e fácil de entender, o que é essencial para o desenvolvimento ágil de aplicações.

Demonstrações Práticas

Vamos explorar um exemplo prático onde criaremos uma aplicação simples de contagem. Esta aplicação permitirá que o usuário incremente e decremente um contador.

import React, { useState } from 'react';

function Counter() {
    // Declarando o estado usando useState
    const [count, setCount] = useState(0);

    return (
        

            
Contador: {count}
             setCount(count + 1)}>Incrementar
             setCount(count - 1)}>Decrementar
        
    );
}

export default Counter;

Este código define um componente funcional Counter que utiliza o Hook useState para gerenciar o estado de count. Os botões permitem ao usuário incrementar ou decrementar o valor do contador.

Agora, vamos utilizar o useEffect para adicionar um efeito colateral que será executado sempre que o contador mudar. Neste caso, vamos imprimir o novo valor do contador no console.

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

function Counter() {
    const [count, setCount] = useState(0);

    // Efeito colateral para logar o contador
    useEffect(() => {
        console.log(`Contador atualizado: ${count}`);
    }, [count]); // O efeito será executado quando 'count' mudar

    return (
        

            
Contador: {count}
             setCount(count + 1)}>Incrementar
             setCount(count - 1)}>Decrementar
        
    );
}

export default Counter;

Com a adição do useEffect, agora sempre que o contador for atualizado, o novo valor será impresso no console, permitindo uma melhor observação do estado da aplicação.

Dicas ou Boas Práticas

• Utilize Hooks personalizados para encapsular lógica reutilizável entre componentes.
• Destructure valores do estado e métodos de atualização para manter seu código limpo e legível.
• Evite efeitos colaterais desnecessários, utilizando as dependências corretamente no useEffect.
• Teste seus componentes isoladamente para garantir que eles funcionem como esperado antes de integrá-los.

Conclusão com Incentivo à Aplicação

Agora que você aprendeu sobre o React e como utilizar Hooks para gerenciar estado e efeitos colaterais, é hora de colocar em prática o que aprendeu. Comece a desenvolver suas próprias aplicações e experimente a flexibilidade que o React oferece.

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!