Jeff Bruchado
Voltar para o Blog

Signals em JavaScript: A Nova Era da Reatividade que Esta Transformando o Frontend

Ola HaWkers, uma revolucao silenciosa esta acontecendo no mundo JavaScript: os Signals estao se tornando o novo padrao de reatividade para frameworks frontend. Angular, Vue, Solid, Svelte e ate mesmo o comite TC39 estao abraçando essa abordagem.

Voce ja se perguntou por que seu componente re-renderiza inteiro quando apenas um pequeno valor muda? Os Signals prometem resolver exatamente esse problema. Vamos entender como funcionam e por que estao conquistando a comunidade.

O Que Sao Signals

Signals sao primitivos reativos que representam um valor que pode mudar ao longo do tempo. Quando um Signal muda, apenas as partes da UI que dependem dele sao atualizadas, sem necessidade de re-renderizar todo o componente.

Conceito Fundamental

// Conceito basico de um Signal
const count = signal(0);

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

// Atualizar o valor
count.value = 5;

// Todas as dependencias sao notificadas automaticamente

💡 Diferenca chave: Enquanto o React usa Virtual DOM e reconciliacao, Signals atualizam diretamente apenas os elementos afetados.

Por Que Signals Estao em Alta

O Problema do React e Virtual DOM

O modelo do React, embora poderoso, tem limitacoes:

// React: Quando state muda, TODO o componente re-executa
function UserProfile({ userId }) {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [avatar, setAvatar] = useState('');
    const [settings, setSettings] = useState({});

    // Mudar QUALQUER estado causa re-render completo
    // Mesmo que so o nome mude, tudo re-executa

    return (
        <div>
            <img src={avatar} /> {/* Re-renderiza mesmo sem mudar */}
            <h1>{name}</h1>          {/* Unica coisa que mudou */}
            <p>{email}</p>           {/* Re-renderiza mesmo sem mudar */}
            <Settings data={settings} /> {/* Re-renderiza mesmo sem mudar */}
        </div>
    );
}

A Solucao com Signals

// Com Signals: Apenas o elemento afetado atualiza
function UserProfile() {
    const name = signal('');
    const email = signal('');
    const avatar = signal('');
    const settings = signal({});

    // Mudar name.value atualiza APENAS o <h1>
    // Nada mais e re-executado

    return (
        <div>
            <img src={avatar.value} /> {/* Nao re-renderiza */}
            <h1>{name.value}</h1>          {/* Unico elemento atualizado */}
            <p>{email.value}</p>           {/* Nao re-renderiza */}
            <Settings data={settings.value} /> {/* Nao re-renderiza */}
        </div>
    );
}

Signals nos Principais Frameworks

Angular Signals

Angular adotou Signals na versao 16+ como nova forma de gerenciar estado:

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

@Component({
    selector: 'app-counter',
    template: `
        <div>
            <p>Count: {{ count() }}</p>
            <p>Double: {{ double() }}</p>
            <button (click)="increment()">+1</button>
        </div>
    `
})
export class CounterComponent {
    // Signal basico
    count = signal(0);

    // Computed: derivado de outros signals
    double = computed(() => this.count() * 2);

    // Effect: side effect quando signals mudam
    constructor() {
        effect(() => {
            console.log(`Count changed to: ${this.count()}`);
        });
    }

    increment() {
        this.count.update(c => c + 1);
    }
}

Vue 3 Reactivity (Signals-like)

Vue 3 ja usa um sistema similar a Signals com seu sistema de reatividade:

import { ref, computed, watch } from 'vue';

export default {
    setup() {
        // ref e similar a signal
        const count = ref(0);

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

        // watch para side effects
        watch(count, (newVal) => {
            console.log(`Count changed to: ${newVal}`);
        });

        const increment = () => count.value++;

        return { count, double, increment };
    }
};

Solid.js Signals

Solid foi pioneiro em Signals no mundo JavaScript moderno:

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

function Counter() {
    // Signal basico
    const [count, setCount] = createSignal(0);

    // Memo: equivalente a computed
    const double = createMemo(() => count() * 2);

    // Effect: roda quando dependencias mudam
    createEffect(() => {
        console.log(`Count: ${count()}, Double: ${double()}`);
    });

    return (
        <div>
            <p>Count: {count()}</p>
            <p>Double: {double()}</p>
            <button onClick={() => setCount(c => c + 1)}>+1</button>
        </div>
    );
}

Svelte 5 Runes (Signals)

Svelte 5 introduziu Runes, sua versao de Signals:

<script>
    // $state e um Signal
    let count = $state(0);

    // $derived e computed
    let double = $derived(count * 2);

    // $effect para side effects
    $effect(() => {
        console.log(`Count: ${count}, Double: ${double}`);
    });

    function increment() {
        count++;
    }
</script>

<div>
    <p>Count: {count}</p>
    <p>Double: {double}</p>
    <button onclick={increment}>+1</button>
</div>

Proposta TC39: Signals Nativos

O mais emocionante e que existe uma proposta para adicionar Signals diretamente ao JavaScript atraves do TC39:

Proposta Atual

// Possivel sintaxe futura do JavaScript nativo
import { Signal } from 'std:signals';

// Criar signal
const count = new Signal.State(0);

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

// Escrever valor
count.set(5);

// Computed (derivado)
const double = new Signal.Computed(() => count.get() * 2);

// Effect
Signal.subtle.Watcher.create(() => {
    console.log(`Value changed: ${count.get()}`);
});

Status da Proposta

Stage 1 (Janeiro 2026):

  • Proposta aceita pelo TC39
  • Em discussao ativa
  • Colaboracao entre Angular, Vue, Solid, Svelte
  • Polyfills ja disponiveis para testes

💡 Importante: Quando aprovado, Signals serao parte do JavaScript nativo, funcionando em qualquer ambiente sem frameworks.

Implementando Signals do Zero

Para entender melhor, vamos criar uma implementacao simplificada:

// Implementacao didatica de Signals
class Signal {
    constructor(initialValue) {
        this._value = initialValue;
        this._subscribers = new Set();
    }

    get value() {
        // Rastreia quem esta lendo
        if (Signal.currentEffect) {
            this._subscribers.add(Signal.currentEffect);
        }
        return this._value;
    }

    set value(newValue) {
        if (this._value !== newValue) {
            this._value = newValue;
            // Notifica todos os assinantes
            this._subscribers.forEach(fn => fn());
        }
    }
}

// Contexto para rastrear effects
Signal.currentEffect = null;

// Funcao effect
function effect(fn) {
    Signal.currentEffect = fn;
    fn(); // Executa uma vez para registrar dependencias
    Signal.currentEffect = null;
}

// Funcao computed
function computed(fn) {
    const signal = new Signal();

    effect(() => {
        signal._value = fn();
        signal._subscribers.forEach(sub => sub());
    });

    return signal;
}

// Uso
const count = new Signal(0);
const double = computed(() => count.value * 2);

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

count.value = 5; // Loga: "Count: 5, Double: 10"
count.value = 10; // Loga: "Count: 10, Double: 20"

Beneficios de Performance

Comparativo de Re-renders

Cenario React Signals
1 prop muda Componente inteiro Apenas 1 elemento
Lista de 1000 itens, 1 muda Reconcilia 1000 Atualiza 1
Formulario com 20 campos 20 re-renders 1 atualizacao
Animacao 60fps Pode dropar frames Consistente

Benchmarks Reais

Em aplicacoes de producao, Signals mostram:

Performance:

  • 30-50% menos CPU em atualizacoes frequentes
  • Menor GC (Garbage Collection) por menos objetos criados
  • Animacoes mais suaves

Memoria:

  • Sem Virtual DOM em memoria
  • Grafos de dependencia mais eficientes
  • Melhor para dispositivos moveis

Quando Usar Signals

Ideais Para

  • Dashboards com dados em tempo real: Atualizacoes frequentes e localizadas
  • Formularios complexos: Muitos campos, validacao instantanea
  • Animacoes e jogos: Performance critica
  • Aplicacoes mobile/embedded: Recursos limitados
  • Grandes listas: Virtualizacao e atualizacoes parciais

React Ainda e Valido Para

  • Aplicacoes existentes com grande base de codigo
  • Equipes familiarizadas com o modelo mental do React
  • Quando server components sao prioridade
  • Ecossistema especifico necessario

Migrando Para Signals

Se voce quer experimentar Signals, aqui estao opcoes por framework:

Para Projetos Novos

  1. SolidJS: Signals desde o inicio, sintaxe familiar
  2. Svelte 5: Runes sao poderosos e intuitivos
  3. Qwik: Resumability + Signals

Para Projetos Existentes

  1. Angular: Migrate gradualmente para Signals
  2. Vue: Ja usa conceitos similares
  3. React: Use Preact Signals ou Jotai

O Futuro da Reatividade

O consenso na comunidade JavaScript aponta para:

2026-2027

  • TC39 Signals avanca para Stage 2/3
  • Mais frameworks adotam Signals
  • React considera abordagem similar

Alem

  • JavaScript nativo com Signals
  • Padronizacao entre frameworks
  • Performance como padrao, nao otimizacao

Conclusao

Signals representam uma evolucao natural na forma como lidamos com reatividade em JavaScript. Ao invés de re-renderizar componentes inteiros, atualizamos apenas o necessário. Isso resulta em aplicações mais rápidas, mais eficientes e mais fáceis de raciocinar.

Se você ainda não experimentou Signals, este é o momento perfeito para começar. Angular, Vue, Solid e Svelte já oferecem excelentes implementações prontas para produção.

Se voce se interessa pelo futuro do JavaScript, recomendo que de uma olhada em outro artigo: CEO do Cursor Alerta Para os Riscos do Vibe Coding onde voce vai descobrir como usar IA de forma responsavel no desenvolvimento.

Bora pra cima! 🦅

Comentários (0)

Esse artigo ainda não possui comentários 😢. Seja o primeiro! 🚀🦅

Adicionar comentário