No desenvolvimento de interfaces com React, a introdução dos Hooks foi um marco significativo que transformou a maneira como gerenciamos o estado e o ciclo de vida dos componentes. Antes da chegada dos Hooks, a manipulação do estado e dos efeitos colaterais era feita principalmente em componentes de classe, o que frequentemente complicava o código e tornava a reutilização mais difícil. Com os Hooks, podemos utilizar funcionalidades avançadas em componentes funcionais, simplificando o desenvolvimento e promovendo uma experiência melhor para os desenvolvedores.

Principais Hooks

useState

O useState é o Hook mais básico e frequentemente utilizado no React. Ele permite que desenvolvedores manipulem o estado dentro de componentes funcionais de forma simples e intuitiva.

Exemplo prático:

import React, { useState } from 'react';

function Contador() {
    const [contagem, setContagem] = useState(0);

    return (
        <div>
            <p>Você clicou {contagem} vezes</p>
            <button onClick={() => setContagem(contagem + 1)}>
                Clique aqui
            </button>
        </div>
    );
}

No exemplo acima, utilizamos o useState para criar uma variável contagem que é incrementada toda vez que o botão é clicado. Isso mostra como o gerenciamento de estado se torna simples e direto.

useEffect

O useEffect é um Hook que permite gerenciar efeitos colaterais, como chamadas a APIs, assinaturas de eventos e manipulação de DOM, tudo isso fora do ciclo principal de renderização.

Como funciona:

Ao usar o useEffect, podemos especificar quando o efeito deve ser executado, seja após renderizações ou em resposta a mudanças em valores específicos.

Exemplo prático:

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

function DadosUsuario() {
    const [usuario, setUsuario] = useState(null);

    useEffect(() => {
        fetch('https://api.exemplo.com/usuario')
            .then(response => response.json())
            .then(data => setUsuario(data));
    }, []); // O array vazio indica que o efeito só deve rodar uma vez após a montagem do componente

    return (
        <div>
            {usuario ? <p>Nome: {usuario.nome}</p> : <p>Carregando...</p>}
        </div>
    );
}

No código acima, ao montar o componente DadosUsuario, o useEffect faz uma chamada à API e atualiza o estado do usuário assim que os dados são recebidos.

useContext

O useContext facilita o compartilhamento de dados entre componentes sem a necessidade de passar props em níveis profundos da árvore de componentes. É uma maneira eficaz de gerenciar temas, configurações de usuário ou outros dados globais.

Exemplo prático:

import React, { createContext, useContext } from 'react';

const TemaContexto = createContext('light');

function Botao() {
    const tema = useContext(TemaContexto);
    return <button className={tema}>Clique</button>;
}

function App() {
    return (
        <TemaContexto.Provider value="dark">
            <Botao />
        </TemaContexto.Provider>
    );
}

Aqui, o Botao acessa o tema diretamente do TemaContexto, eliminando a necessidade de passar essa informação por props entre os componentes.

Hooks Customizados

Uma das grandes vantagens dos Hooks é a possibilidade de criar Hooks personalizados. Isso permite encapsular lógicas específicas que podem ser reutilizadas em diversos componentes, mantendo o código mais limpo e modular.

Exemplo prático de um Hook personalizado:

import { useState, useEffect } from 'react';

function useFetch(url) {
    const [dados, setDados] = useState(null);
    const [carregando, setCarregando] = useState(true);

    useEffect(() => {
        fetch(url)
            .then(response => response.json())
            .then(data => {
                setDados(data);
                setCarregando(false);
            });
    }, [url]);

    return { dados, carregando };
}

// Uso do Hook
function Dados() {
    const { dados, carregando } = useFetch('https://api.exemplo.com/dados');

    if (carregando) return <p>Carregando...</p>;
    return <pre>{JSON.stringify(dados, null, 2)}</pre>;
}

Neste exemplo, o `useFetch` torna o processo de busca de dados simples e reutilizável em diferentes partes da aplicação.

Conclusão

Convidamos você a explorar a documentação oficial do React e a experimentar a integração de Hooks em seus próprios projetos. A prática leva ao aperfeiçoamento, e os Hooks podem ser uma adição poderosa ao seu conjunto de ferramentas no desenvolvimento de aplicações modernas.