Introdução

Muitos desenvolvedores, quando se trata de funcionalidade padrão de aplicativos da web, por exemplo: armazenar e gerenciar valores booleanos, manipular teclas pressionadas ou criar stepper, muitas vezes tentam descobrir como fazer esta ou aquela função e mais frequentemente encontram uma maneira de implementar a funcionalidade do zero.

Não há necessidade de reinventar a roda!

Criadores e usuários de bibliotecas de funções reutilizáveis ​​para vários frameworks (React, vue etc.) olham para esta abordagem com tal reação.

Para Vue — é, por exemplo, vueuse. (funções de utilidade vue)

Para React, o melhor hoje é o reactuse totalmente novo e com suporte ativo (para ganchos de reação)

Que problema essas bibliotecas resolvem?

Eles são necessários para tornar a vida menos desafiadora para os desenvolvedores. Prepare com antecedência todas as funções possíveis que o desenvolvedor possa necessitar em seu trabalho. Se ele usar um pacote pronto, pelo menos economizará tempo e, no máximo, minimizará a probabilidade de seu erro ou bug ser encontrado no código, pois cada função é testada separadamente. O caso de uso é realmente enorme. Com a ajuda dessas bibliotecas você pode, por exemplo:

1. usar web-sockets
2. fazer consultas
3. detectar a geolocalização do usuário
4. usar armazenamento local
5. crie facilmente janelas modais

E isso é apenas uma pequena parte de todos os casos possíveis.

Por que o VueUse é legal?

VueUse é uma das bibliotecas mais populares para vue. Afinal, ele fornece a funcionalidade reutilizável mais básica. Algumas pessoas pensam que é um padrão na construção de aplicações Vue e sem ele é impossível fazê-lo. É difícil discordar, a biblioteca é composta por mais de duzentas funções e segue a ideologia descrita acima.

Melhor alternativa para React

Embora elogie o vueuse como a melhor maneira de realizar perfeitamente uma grande ideia, não devemos esquecer a primeira biblioteca/framework js - React. E aqui a situação era mais desagradável. Afinal, não existe uma biblioteca estabelecida, confiável, extensa e única para React. Houve algumas tentativas de diferentes desenvolvedores, mas em um deles há poucos ganchos (no React eles são ganchos, sim), em algum lugar há ganchos construídos usando uma API não processada.

Para melhorar a situação, e como alternativa ao vueuse, mas em reagir, veio o reactuse.

Vamos pegar, por exemplo, e tentar criar um gerenciamento de lista com a ajuda de uma biblioteca e usando apenas o vanilla react.

import { useList } from "@siberiacancode/reactuse";

function App() {
  const { value, set, push, removeAt, insertAt, updateAt, clear, reset } =
    useList(["Pink Floyd", "Led Zeppelin"]);
}
export default App;

Obtemos value (valor do array), set (função para atribuir outro valor do array), push (função para adicionar valores ao array), removeAt (excluir por índice), updateAt (alterar valor por índice), clear (limpar a matriz), redefinir (redefinir para o valor padrão)
Agora o código para obter todos esses estados e funções no vanilla react:

const [value, setValue] = useState(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState(["Pink Floyd", "Led Zeppelin"]);
  const set = (newValue: string[]) => {
    setValue(newValue);
  };
  const push = (valueToPush: string) => {
    setValue((prevArray) => [...prevArray, valueToPush]);
  };
  const removeAt = (index: number) => {
    setValue((prevArray) => [
      ...prevArray.slice(0, index),
      ...prevArray.slice(index   1),
    ]);
  };
  const insertAt = (index: number, item: "string") =>
    setValue((l) => [...l.slice(0, index), item, ...l.slice(index)]);

  const updateAt = (index: number, newValue: string) => {
    setValue((prevList) =>
      prevList.map((element, index) => (index === index ? newValue : element))
    );
  };

  const clear = () => setValue([]);
  const reset = () => setValue(initialValue);

E obtemos exatamente os mesmos métodos e estado. E o código é muito mais pequeno e simples

A biblioteca é mantida ativamente, novos ganchos são adicionados, há um site conveniente com documentação, os ganchos usam fontes simples e possuem uma API mais elaborada. Agora existem mais de 80 ganchos implementados. Também quero observar que existem implementações absolutamente novas, que não vi em nenhum outro lugar:

• usePaint — para criar uma tela para desenhar nela. Você define a tela e o gancho permite desenhar nela, ajustar o tamanho do pincel, a cor, a opacidade e o status “desenhar” ou “desenhar agora”
• useStopwatch — para criar cronômetros
• useEyeDropper — para usar o conta-gotas para seleção de cores
• grande quantidade de ganchos para trabalhar com o dispositivo do usuário ou API do navegador (useMemory, useOperatingSystem, useClipboard, useBrowserLanguage, useHash e assim por diante)

Conclusão

Essas bibliotecas devem se tornar um padrão de desenvolvimento, só porque permitem que você não fique focado nos pequenos detalhes que já foram inventados há muito tempo, basta importá-los e utilizá-los.

links reativos

npm-github