Variáveis no React: Como Gerenciar Estados e Dados

1. Diferença Entre Variáveis JavaScript e Estado no React

No React, podemos utilizar variáveis de JavaScript como em qualquer outro código JS. No entanto, o conceito de estado (state) é o que realmente diferencia o React de outras abordagens. O estado é uma variável que, quando alterada, provoca a re-renderização do componente automaticamente, mantendo a interface sincronizada com os dados.

// Exemplo de uma variável JavaScript simples
const nome = "João";

function Saudacao() {
    return <p>Olá, {nome}!</p>;
}

No exemplo acima, "João" é uma variável normal de JavaScript, e sua alteração não fará o componente ser re-renderizado automaticamente.

// Exemplo usando estado no React
import { useState } from 'react';

function Saudacao() {
    const [nome, setNome] = useState("João");

    return (
        <div>
            <p>Olá, {nome}!</p>
            <button onClick={() => setNome("Maria")}>Mudar Nome</button>
        </div>
    );
}

Aqui, usamos o hook useState para criar uma variável de estado chamada nome. Quando o botão é clicado, o estado é alterado para "Maria", e o componente é re-renderizado para refletir essa mudança.

2. Gerenciando Variáveis de Estado com useState

O hook useState é a principal ferramenta para criar e gerenciar variáveis de estado em componentes funcionais. Ele permite inicializar uma variável e uma função para atualizar esse valor.

// Exemplo básico de useState
import { useState } from 'react';

function Contador() {
    const [contador, setContador] = useState(0);

    return (
        <div>
            <p>Você clicou {contador} vezes</p>
            <button onClick={() => setContador(contador + 1)}>
                Incrementar
            </button>
        </div>
    );
}

No exemplo acima, usamos useState para criar uma variável contador que será atualizada toda vez que o botão for clicado, resultando na re-renderização do componente com o novo valor do contador.

3. Manipulação de Variáveis Locais

Além do estado, você também pode usar variáveis locais dentro de funções ou componentes para manipular dados temporários. No entanto, diferente do estado, a atualização de uma variável local não provoca a re-renderização do componente.

// Variáveis locais dentro de um componente
function Calculadora() {
    const a = 5;
    const b = 3;
    const soma = a + b;

    return <p>A soma de {a} e {b} é {soma}</p>;
}

Neste exemplo, as variáveis a, b, e soma são locais e usadas diretamente na renderização. Alterar seus valores não re-renderizaria o componente, pois não fazem parte do estado.

4. Usando useEffect Para Variáveis Reativas

O hook useEffect permite que você execute efeitos colaterais em componentes React, como chamadas de API ou atualização de títulos de página. Ele é frequentemente utilizado em conjunto com useState para lidar com variáveis reativas que dependem de ações externas.

// Exemplo de uso de useEffect para atualizar o título da página
import { useState, useEffect } from 'react';

function TituloDinamico() {
    const [contador, setContador] = useState(0);

    useEffect(() => {
        document.title = `Você clicou ${contador} vezes`;
    }, [contador]);

    return (
        <div>
            <p>Você clicou {contador} vezes</p>
            <button onClick={() => setContador(contador + 1)}>
                Incrementar
            </button>
        </div>
    );
}

Com useEffect, estamos observando o valor do contador e atualizando o título da página toda vez que o valor for alterado. O segundo parâmetro do useEffect é uma lista de dependências que indica quando o efeito deve ser executado.

5. Variáveis Globais com Context API

Se você precisar compartilhar variáveis entre vários componentes sem passar dados manualmente via props, pode utilizar a Context API do React. A Context API permite criar variáveis globais que podem ser acessadas por qualquer componente na árvore de componentes.

// Exemplo de uso da Context API
import React, { useState, useContext, createContext } from 'react';

const NomeContext = createContext();

function App() {
    const [nome, setNome] = useState("João");

    return (
        <NomeContext.Provider value={nome}>
            <Saudacao />
        </NomeContext.Provider>
    );
}

function Saudacao() {
    const nome = useContext(NomeContext);

    return <p>Olá, {nome}!</p>;
}

Aqui, estamos usando a Context API para disponibilizar a variável nome para qualquer componente dentro da árvore de componentes. O hook useContext é usado para acessar o valor do contexto.

Conclusão

Variáveis desempenham um papel crucial no desenvolvimento com React, seja em forma de estado, variáveis locais ou globais usando Context API. Ao dominar como manipular o estado com useState, executar efeitos colaterais com useEffect e compartilhar variáveis globais com Context API, você terá o controle total sobre o fluxo de dados na sua aplicação React, criando interfaces de usuário dinâmicas e reativas.