Em um aplicativo da web, a reatividade refere-se à capacidade da interface do usuário (UI) de se atualizar automaticamente em resposta a alterações nos dados. Em outras palavras, quando o estado de um aplicativo muda, a UI reage e se ajusta para refletir essa nova informação, sem que você precise recarregar a página ou manipular manualmente o DOM.

Se você já usou frameworks como React, Vue ou Svelte, sabe que a reatividade é um conceito central neles. Eles tornam a atualização da UI quase mágica: você muda uma variável e o que aparece na tela se atualiza instantaneamente. Mas e se você quiser esse comportamento sem depender de uma biblioteca externa? É totalmente possível, e entender como isso funciona nos bastidores é fundamental para se tornar um desenvolvedor mais completo.

Por que Reatividade em JavaScript Puro?

Pode haver várias razões para você querer implementar a reatividade sem frameworks:

Entendimento Profundo: Construir a reatividade do zero oferece uma compreensão muito mais profunda de como os frameworks funcionam. Você aprenderá sobre a mecânica de observação de dados e atualização do DOM, o que é valioso.

Performance: Em projetos pequenos, a sobrecarga de um framework pode ser desnecessária. Um código reativo puro pode ser mais leve e rápido.

Projetos Legados: Talvez você esteja trabalhando em um projeto que não usa frameworks. Adicionar pequenas funcionalidades reativas pode modernizar partes do código sem uma reescrita completa.

O Básico da Reatividade: Observação de Dados

A ideia principal por trás da reatividade é que algo precisa "observar" os dados. Quando os dados mudam, um observador é notificado e age, geralmente atualizando a UI. Para fazer isso em JavaScript puro, podemos usar alguns truques e ferramentas nativas.

1. Getter e Setter com Object.defineProperty()

Uma forma de observar mudanças em propriedades de um objeto é usando o método Object.defineProperty(). Com ele, você pode definir getters e setters personalizados para uma propriedade. O setter é uma função que é executada toda vez que a propriedade é alterada, permitindo que você adicione lógica de atualização.

const user = {};

let userName = 'João';

Object.defineProperty(user, 'name', {
 get() {
   return userName;
 },
 set(newValue) {
   userName = newValue;
   console.log(`O nome foi alterado para: ${userName}`);
   // Aqui você pode adicionar a lógica para atualizar o DOM
 }
});

console.log(user.name); // 'João'
user.name = 'Maria';    // 'O nome foi alterado para: Maria'
console.log(user.name); // 'Maria'

No exemplo acima, sempre que user.name é alterado, o setter é ativado, e a mensagem de console.log é exibida. Você pode substituir essa linha por uma função que atualiza o texto de um elemento HTML.

2. Proxy: A Abordagem Moderna

O Proxy é a ferramenta mais poderosa e moderna para a reatividade em JavaScript. Ele cria um "proxy" para um objeto, permitindo interceptar todas as operações feitas nele, como leitura, escrita, e até mesmo a remoção de propriedades. A grande vantagem do Proxy sobre Object.defineProperty é que ele monitora o objeto inteiro, e não apenas uma propriedade por vez.

const data = {
 text: 'Olá mundo!'
};

const handler = {
 set(target, prop, value) {
   // Intercepta a alteração de propriedade
   target[prop] = value;
   console.log(`A propriedade "${prop}" foi alterada para "${value}"`);
   updateDOM(); // Chama a função que atualiza a UI
   return true;
 }
};

const reactiveData = new Proxy(data, handler);

const myElement = document.getElementById('my-element');

function updateDOM() {
 myElement.textContent = reactiveData.text;
}

// Inicializa a UI
updateDOM();

// Altera o dado e a UI se atualiza automaticamente
setTimeout(() => {
 reactiveData.text = 'O texto foi atualizado!';
}, 2000);

No código acima, criamos um objeto reactiveData que é um Proxy de data. O handler tem um método set que é acionado sempre que uma propriedade de reactiveData é alterada. A função updateDOM() é chamada nesse momento, garantindo que o texto na tela seja sincronizado com o valor de reactiveData.text.

Criando um Sistema Reativo Simples

Para demonstrar como isso se une em algo prático, vamos criar um sistema reativo simples com um contador.

// O objeto de estado inicial
const state = {
 count: 0
};

// A função que atualiza a UI
const updateUI = (prop, value) => {
 const element = document.getElementById(prop);
 if (element) {
   element.textContent = value;
 }
};

// O manipulador para o Proxy
const handler = {
 set(target, prop, value) {
   target[prop] = value;
   updateUI(prop, value); // Atualiza a UI quando o estado muda
   return true;
 }
};

// O objeto reativo
const reactiveState = new Proxy(state, handler);

// Exemplo de uso
document.addEventListener('DOMContentLoaded', () => {
 // Inicializa a UI com o estado inicial
 updateUI('count', reactiveState.count);

 const button = document.getElementById('increment-btn');
 button.addEventListener('click', () => {
   // Apenas alteramos o estado. A UI se encarrega de se atualizar.
   reactiveState.count++;
 });
});

Este exemplo demonstra o poder da reatividade: separamos a lógica de negócio (incrementar o contador) da lógica da UI (atualizar o texto). Ao modificar reactiveState.count, a UI é atualizada automaticamente, sem a necessidade de manipular o DOM diretamente no evento de clique.

Conclusão

Embora frameworks como React e Vue simplifiquem drasticamente a reatividade, entender como ela funciona em JavaScript puro é uma habilidade inestimável. Usando ferramentas nativas como Proxy, você pode construir sistemas reativos eficientes e leves. Isso não apenas enriquece sua compreensão do JavaScript moderno, mas também oferece a flexibilidade de adicionar funcionalidades poderosas a qualquer projeto, independentemente de ele usar um framework ou não.