Os sinais acabaram de reagir?

Na semana passada, Daishi Kato (criador do Waku) lançou use-signals, um gancho React experimental para sinais TC39, que visa demonstrar como os sinais podem funcionar no React.

O que são sinais?

Os sinais estão em desenvolvimento há cerca de 10 anos e são usados ​​por frameworks JavaScript como Angular, Vue, SolidJS, Qwik e Preact, (entre outros), e são usado para gerenciar o estado do lado do cliente. Sinais são variáveis ​​que rastreiam automaticamente onde foram usados. Quando ocorre uma alteração em um Signal, seu valor é invalidado – o que faz com que o estado da UI seja atualizado/renderizado novamente.

Por exemplo, aqui está um sinal chamado counter que possui um valor de 0.

Veja o código no Gist.

Os sinais são fundamentalmente diferentes dos do React useState. useState é um gancho fornecido pelo React para gerenciar o estado dentro de componentes funcionais e permite declarar uma variável de estado e uma função para atualizar essa variável.

Sinais são ouvintes de eventos ou observadores para lidar com eventos assíncronos ou alterações em dados que ocorrem fora do controle imediato do componente. Como tal, você notará que não há função “setter” definida na declaração do Signal. Considerando que, com React, existe. Por exemplo, aqui está como o Signal acima seria declarado no React.

Veja o código no Gist.

A razão pela qual os Sinais são um conceito interessante é que o modelo “de cima para baixo” do React significa que sempre que um valor de estado muda, todos os descendentes da árvore de componentes são renderizados novamente e quaisquer alterações relevantes na UI são feitas – mantendo assim o DOM/UI em sincronia com o estado do aplicativo.

Usar um Signal para gerenciar o estado, no entanto, permite um controle mais refinado sobre quais partes de uma UI são “renderizadas novamente”. Isso não quer dizer que os Sinais tenham melhor desempenho do que a abordagem React, mas são fundamentalmente diferentes um do outro.

Sinais ocultos

Como mostrado acima, um sinal pode ser declarado usando o new construtor Ex.:

Veja o código no Gist.

Então, para “obter” o valor de um Sinal você pode usar o .get() método; e para “definir” ou atualizar um sinal, você pode usar o .set() método. Por exemplo:

Veja o código no Gist.

O que são sinais em reação?

Ao contrário das minhas notas acima sobre como os Signals funcionam, não é assim que eles funcionam no React. Ignorar a diferenciação do React iria contra os princípios básicos de programação declarativa do React. Portanto, Signals in React ainda usará o VDOM e ainda causará novas renderizações da mesma forma que uma alteração em useState seria.

Então, qual é o objetivo dos Sinais no React? Este também foi meu primeiro pensamento, e Daishi até escreveu sobre isso: Por que você não precisa de sinais no React. Então, vamos mergulhar um pouco mais fundo no mundo dos Sinais.

Proposta TC39

Se a proposta do TC39 for bem-sucedida e os Signals se tornarem disponíveis nativamente em JavaScript, poderemos usar Signals fora dos frameworks. Mais do que isso, os autores do framework deveriam — em teoria — ser capazes de implementar Sinais de forma padronizada. Quaisquer avanços nos Sinais devem beneficiar todas as estruturas que implementaram a abordagem padronizada. Atualmente, muitas das estruturas que usam Signals abordam isso de maneiras ligeiramente diferentes.

Em 11 de abril, Rob Eisenberg anunciou que a proposta TC39 avançou para o estágio 1. Isso significa oficialmente que a proposta está agora sob consideração da ECMAScript; e embora ainda haja muito trabalho a fazer, a proposta parece estar a avançar na direcção certa.

Se você estiver curioso para saber mais, aqui está um link para a apresentação de slides: Sinais de desenvolvimento (para o estágio 1). Além disso, aqui está um resumo das notas da reunião: Atualizações da 101ª reunião do TC39.

A proposta TC39 também menciona a importância de desenvolver a API de forma a permitir a implementação de requisitos específicos da estrutura. Este é o caso do use-signs porque ele usa a API Signals (proposta), mas ainda respeita os princípios básicos do React.

Se a equipe do React optaria ou não por adotar o Signals é uma questão diferente, mas use-signals ajuda a mostrar que o Signals funcionaria no React.

Proposta de utilitários de sinal

No momento, os sinais suportam apenas primitivos, mas há propostas adicionais de utilitários de sinais em andamento que podem trazer Object e Array para Signals. Por exemplo:

Objeto

Veja o código no Gist.

Variedade

Veja o código no Gist.

Exemplo de sinais em reação

Com tudo isso dito, vamos dar uma olhada em como seriam os sinais de uso no React. O código React que mostrarei funciona no contexto do Waku, que é renderizado no lado do servidor por padrão, mas suporta o 'use client' diretiva para componentes somente cliente.

Diferente useState, com Signals uma nova declaração de Signal é declarada fora do componente. No trecho abaixo, é o const nomeado counter. Isto é usado para armazenar o valor inicial e pode ser passado para o useSignal gancho.

O count const expõe tanto o .set() e .get() métodos, que podem ser usados ​​​​dentro da função de manipulador de eventos, handleInc.

Alterações no valor do Signal farão com que o DOM seja atualizado e o novo count valor a ser exibido na UI.

O interessante aqui é que no Jsx retornado você não precisa usar .get() para acessar e exibir o valor dentro do HTML <div /> elemento. Em vez disso, o count o valor pode ser acessado diretamente. Isso é um pouco diferente da implementação do Qwik, que exigiria que você acessasse o valor do contador, por exemplo counter.value.

Veja o código no Gist.

useStateComponent

E só para garantir, aqui está a mesma lógica, mas escrita usando React’s useState gancho. Como você pode ver, há pouca diferença entre os dois.

Veja o código no Gist.

Sinais Mistos

Então aí está, Signals in React – eles são possíveis e, embora possa levar algum tempo até que os Signals se tornem JavaScript nativo, eu realmente adoro a sede que esta comunidade próspera tem de desenvolver novas ideias. Se você quiser se envolver, acesse o repositório GitHub: dai-shi/use-signals.

A postagem Os sinais acabaram de reagir? apareceu primeiro em The New Stack.