Com a nova biblioteca TNG-Hooks, os desenvolvedores de JavaScript agora podem decorar funções padrões e autônomas com lógica útil e frequente, com estado e efeito, como consultar um banco de dados remoto ou acessar dados contextuais fora do escopo. A reutilização de código e a composição permitida pelo Hooks potencialmente contribuem para uma base de código menor, mais sustentável e mais robusta.
No React Conf do ano passado, o React surpreendeu a comunidade de desenvolvedores com o React Hooks. Com o React Hooks, os desenvolvedores poderiam abstrair computações com estado ou efetivas em meras funções, que elas reutilizariam e comporiam em seus componentes de função React. O TNG-Hooks de código aberto apresenta os benefícios do React Hooks, mas elimina a dependência do React.
A primeira abordagem para adicionar efeitos e estado a uma computação funcionalmente pura significava abandonar funções em favor de Classes ES. As classes podem ser mais desafiadoras para compor do que funções para desenvolvedores menos experientes. As classes também podem levar à dispersão e à duplicação de bits efetivos de lógica entre os métodos diversos.
Para imitar os componentes da função React, a TNG introduz o conceito de Funções Articuladas que preenchem duas condições. Primeiro, antes de serem chamads, eles são envolvidos por um decorador da TNG. Em segundo lugar, eles chamam funções hook em algum momento de sua execução.
No exemplo a seguir, a função TNG é o decorador, useState é a função hook, e a função hit é uma função articulada.
function hit() {
var [count,updateCount] = useState(0);
count++;
updateCount(count);
console.log(`Hit count: ${count}`);
}
hit = TNG(hit);
hit(); // Hit count: 1
hit(); // Hit count: 2
hit(); // Hit count: 3
No exemplo, a função hit é chamada várias vezes, retornando um valor diferente após cada chamada. Isso faz com que uma função de estado seja atingida. O hook useState abstrai o gerenciamento de estado local (recuperação, armazenamento, e atualização de estado). O hook inicializa uma variável de estado (contagem) para 0, retorna essa variável e uma função (updateCount) para atualizá-la.
A biblioteca TNG-Hooks também fornece os hooks useReducer, useEffect, useMemo, useCallback e useRef, cada um abstraindo um cálculo stateful ou effectful diferente.
A biblioteca TNG fornece adicionalmente hooks TNG personalizados, imitando os hooks React personalizados. Com Hooks personalizados, os desenvolvedores podem definir seus próprios hooks, reutilizando os já pré-existentes. Hooks Customizados TNG são funções JavaScript padrão (não são Funções Articuladas) que chamam, em algum momento de sua execução, Funções Articuladas. Hooks Customizados TNG devem ser chamados de dentro de uma Função Articulada:
// a Custom Hook, ***not*** an Articulated Function
function useHitCounter() {
// inherited TNG hooks-context
var [count,updateCount] = useState(0);
count++;
updateCount(count);
return count;
}
// will be TNG(..) Articulated twice, once as
// each button's click handler
function onClick(evt) {
// using a Custom Hook
var hitCount = useHitCounter();
console.log(`Button #${evt.target.id}: ${hitCount}`);
}
var fooBtn = document.getElementById("foo-btn");
var barBtn = document.getElementById("bar-btn");
// each click handler is an Articulated `onClick()`
fooBtn.addEventListener("click",TNG(onClick),false);
barBtn.addEventListener("click",TNG(onClick),false);
Este exemplo ilustra um Hook Personalizado (useHitCounter) que, conforme necessário, não é uma Função Articulada e reutiliza o hook useState fornecido. O próprio useHitCounter é usado pelo onClick, que é uma função articulada. fooBtn e barBtn reutilizam independentemente a mesma lógica stateHitCounter personalizada stateful, incorporada no manipulador de eventos onClick.
Embora inspirado pelo React, o TNG Hooks é um projeto distinto. Kyle Simpson, autor da biblioteca do TNG-Hooks, explica:
(TNG Hooks) é um projeto separado com suas próprias motivações e comportamentos específicos. O TNG permanecerá semelhante ao React Hooks, onde faz sentido, mas também haverá desvios, conforme apropriado.
Assim como o React Hooks, funções articuladas e hooks devem respeitar regras de chamada. No momento, não existe nenhum mecanismo para impor essas regras ou avisar os desenvolvedores quando eles infringirem as regras. Isso pode levar a comportamentos errados que são difíceis de depurar. Além disso, o React Hooks é uma tecnologia nova e experimental com os prós e contras ainda sendo resolvidos. Embora a TNG Hooks possa incorporar lições aprendidas com o React Hooks, ela também pode precisar de testes adicionais para identificar as melhores práticas e armadilhas.
A instalação está disponível com o pacote nng-hooks npm e o pacote apresenta uma cobertura de código de teste de 100%.
O TNG Hooks é um software de código aberto disponível sob a licença MIT. Contribuições e feedback são incentivados através do projeto TNG-Hooks no GitHub