Signals no JavaScript: TC39 Quer Tornar Reatividade Um Padrão Nativo da Linguagem

Olá HaWkers, uma proposta está agitando o mundo JavaScript: Signals pode se tornar parte oficial da linguagem. Isso significa reatividade nativa, sem precisar de frameworks.

Angular, Vue, Solid, Svelte - todos já usam Signals. Mas React não. Vamos entender essa divisão e o que significa para o futuro.

O Que São Signals

Entendendo o conceito fundamental.

Reatividade Primitiva

Signals são valores reativos:

// Proposta atual do TC39
const count = new Signal.State(0);

// Ler o valor
console.log(count.get()); // 0

// Atualizar o valor
count.set(1);

// Computação derivada
const double = new Signal.Computed(() => count.get() * 2);

console.log(double.get()); // 2

Por Que Isso Importa

Diferença para estado tradicional:

Sem Signals (estado manual):

let count = 0;
let double = count * 2;

// Problema: double não atualiza automaticamente
count = 5;
console.log(double); // Ainda 0! Não é reativo

Com Signals (reativo):

const count = new Signal.State(0);
const double = new Signal.Computed(() => count.get() * 2);

count.set(5);
console.log(double.get()); // 10 - Atualiza automaticamente!

Como Frameworks Usam Signals

Cada framework tem sua implementação.

Vue 3

Signals sob o nome "ref":

import { ref, computed } from 'vue';

// Signal de estado
const count = ref(0);

// Signal computado
const double = computed(() => count.value * 2);

// Template reage automaticamente
<template>
  <button @click="count++">
    {{ count }} x 2 = {{ double }}
  </button>
</template>

Angular

Signals oficiais desde Angular 16:

import { signal, computed, effect } from '@angular/core';

// Signal de estado
const count = signal(0);

// Signal computado
const double = computed(() => count() * 2);

// Efeito colateral
effect(() => {
  console.log(`Count é agora: ${count()}`);
});

// Atualizar
count.set(5);
count.update(n => n + 1);

Solid.js

Signals são o core do framework:

import { createSignal, createMemo, createEffect } from 'solid-js';

const [count, setCount] = createSignal(0);
const double = createMemo(() => count() * 2);

createEffect(() => {
  console.log(`Count: ${count()}, Double: ${double()}`);
});

// JSX é reativo no nível de expressão
<button onClick={() => setCount(c => c + 1)}>
  {count()} x 2 = {double()}
</button>

Svelte 5 (Runes)

Nova sintaxe com runes:

<script>
  let count = $state(0);
  let double = $derived(count * 2);

  $effect(() => {
    console.log(`Count é ${count}`);
  });
</script>

<button onclick={() => count++}>
  {count} x 2 = {double}
</button>

Por Que React Não Usa Signals

A controvérsia explicada.

Filosofia Diferente

React escolheu outro caminho:

Modelo do React (Virtual DOM):

function Counter() {
  const [count, setCount] = useState(0);
  const double = count * 2; // Recalcula em cada render

  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count} x 2 = {double}
    </button>
  );
}
// Componente inteiro re-renderiza quando count muda

Modelo Signals (Reatividade granular):

function Counter() {
  const count = signal(0);
  const double = computed(() => count() * 2);

  return (
    <button onClick={() => count.set(c => c + 1)}>
      {count()} x 2 = {double()}
    </button>
  );
}
// Só as expressões {count()} e {double()} atualizam

Trade-offs

Cada abordagem tem vantagens:

Aspecto	React Hooks	Signals
Performance	Re-render componente	Update granular
Mental model	Simples e previsível	Mais complexo
Debug	React DevTools	Mais difícil
Bundle size	Maior	Menor
Server rendering	Maduro	Evoluindo

Posição Oficial do React

O que a equipe do React diz:

"Signals são otimização de performance, não um novo paradigma. React prefere manter o modelo mental simples e otimizar por baixo dos panos."

Estratégia do React:

• React Compiler (antigo React Forget)
• Memoização automática
• Concurrent rendering
• Server Components

A Proposta TC39

O que está sendo padronizado.

Estado Atual

Progresso no comitê:

Stage 1 (Proposal):

• Aprovado em abril 2024
• Polyfill disponível
• Implementações experimentais
• Discussões ativas

API Proposta

Interface planejada:

// Signal de estado
const counter = new Signal.State(0);

// Leitura
counter.get(); // 0

// Escrita
counter.set(1);

// Signal computado
const doubled = new Signal.Computed(() => counter.get() * 2);

// Apenas leitura
doubled.get(); // 2

// Watcher para efeitos
const watcher = new Signal.subtle.Watcher(() => {
  // Notifica quando signals observados mudam
  console.log("Algo mudou!");
});

watcher.watch(doubled);

Por Que No Navegador

Benefícios de ter nativo:

1. Interoperabilidade:

// Signals do Vue funcionando com Angular
import { ref } from 'vue';
import { signal } from '@angular/core';

// Hoje: Incompatíveis
// Com padrão: Intercambiáveis

2. Performance:

• Implementação nativa em C++
• Otimizações do engine
• Menos overhead de abstração
• Melhor integração com DOM

3. Consistência:

• Mesma API em todos frameworks
• Portabilidade de código
• Documentação unificada
• Menos fragmentação

Impacto Nos Frameworks

O que muda para cada um.

Vue

Migração mais fácil:

// Vue 3 hoje
import { ref, computed } from 'vue';
const count = ref(0);

// Vue futuro (possível)
const count = new Signal.State(0);
// Vue adiciona apenas camadas de conveniência

Angular

Já está preparado:

// Angular hoje já tem API similar
import { signal, computed } from '@angular/core';

// Migração para nativo seria transparente
// Principalmente ganhos de performance

Solid

Valida a abordagem:

// Solid já usa API muito similar
// Seria quase drop-in replacement
// Ryan Carniato está envolvido na proposta

React

Pressão para adaptar:

Cenários possíveis:

1. React ignora e mantém abordagem atual
2. React cria camada de compatibilidade
3. React oferece modo "signals" opcional
4. Novo framework emerge dominante

Performance Na Prática

Benchmarks reais.

Comparativo de Frameworks

Teste de atualização de 10.000 itens:

Framework	Tempo (ms)	Memória (MB)
Vanilla + Signals	12	8
Solid.js	14	10
Vue 3	18	12
Svelte 5	16	11
Angular 19	22	15
React 19	45	28

Quando Signals Brilham

Casos de uso ideais:

Dashboards com muitos dados:

// Com Virtual DOM: Tudo re-renderiza
// Com Signals: Só células alteradas atualizam

const cells = Array(10000).fill(null).map(() =>
  new Signal.State(Math.random())
);

// Atualizar uma célula: O(1) com Signals
cells[5000].set(0.5);

Formulários complexos:

// Validação reativa e granular
const email = new Signal.State('');
const isValid = new Signal.Computed(() =>
  email.get().includes('@')
);

// Só o indicador de validação atualiza

Animações e jogos:

// Updates de 60fps
const position = new Signal.State({ x: 0, y: 0 });

// Mínimo overhead por frame
requestAnimationFrame(() => {
  position.set({ x: position.get().x + 1, y: 0 });
});

Usando Signals Hoje

Como experimentar agora.

Polyfill Oficial

Instalação e uso:

npm install signal-polyfill

import { Signal } from 'signal-polyfill';

const count = new Signal.State(0);
const double = new Signal.Computed(() => count.get() * 2);

// Funciona em qualquer ambiente
console.log(double.get()); // 0

count.set(5);
console.log(double.get()); // 10

Frameworks Prontos

Opções para produção:

Se quer Signals hoje:

1. Solid.js - Mais puro em Signals
2. Vue 3 - Signals como "refs"
3. Angular 17+ - Signals oficiais
4. Svelte 5 - Runes (Signals com sintaxe)

Bibliotecas standalone:

• Preact Signals
• @preact/signals-core
• MobX (conceito similar)

O Futuro

Para onde estamos indo.

Timeline Provável

Expectativas realistas:

2026:

• Stage 2 da proposta
• Polyfills estáveis
• Experimentos em browsers

2027:

• Stage 3 (candidato)
• Implementações nativas começam
• Frameworks adaptando

2028+:

• Stage 4 (finalizado)
• Disponível em browsers
• Nova era de frameworks

Impacto na Carreira

O que desenvolvedores devem fazer:

Curto prazo:

• Entenda o conceito de Signals
• Experimente em projetos pessoais
• Continue usando seu framework atual

Médio prazo:

• Acompanhe a proposta TC39
• Avalie Solid/Vue/Angular
• Prepare para mudanças

Longo prazo:

• Signals será conhecimento base
• Frameworks convergirão
• Novas arquiteturas surgirão

Conclusão

Signals representa uma possível unificação do ecossistema JavaScript. Seja a proposta aprovada ou não, o conceito já domina os frameworks modernos - Angular, Vue, Solid, Svelte todos convergem para essa abordagem.

React continua no caminho próprio, mas a pressão aumenta. O tempo dirá se o Virtual DOM se mantém competitivo ou se Signals se torna o padrão.

Para desenvolvedores, o conselho é: entenda o conceito agora. Seja qual for o resultado, reatividade granular é uma tendência clara.

Se você quer fortalecer sua base em JavaScript, confira nosso artigo sobre ES2026 e Temporal API para ver outras novidades importantes da linguagem.

Bora pra cima! 🦅

💻 Domine JavaScript de Verdade

O conhecimento que você adquiriu neste artigo é só o começo. Entender conceitos fundamentais como reatividade exige base sólida na linguagem.

Invista no Seu Futuro

Preparei material completo para você dominar JavaScript:

Formas de pagamento:

• 1x de R$27,00 sem juros
• ou R$27,00 à vista no Pix

📖 Ver Conteúdo Completo