usarPreditivo

Reagir tem useOptimistic. Você age e a UI assume sucesso antes que o servidor confirme. O like fica vermelho, a mensagem aparece na lista e, se o servidor disser não, ela reverte silenciosamente.

Isso é para depois que você fez alguma coisa. Não há nada para antes.

useOptimistic = depois que você fez alguma coisa
usePredictive = antes de fazer algo

O software precisa ser proativo

A maioria dos softwares espera. Você abre, clica, ele reage. Acho que o software precisa ser proativo. Ele deveria se mover antes de mim e fazer a parte chata sem que eu pedisse.

Guillermo Rauch escreveu sobre isso em 2014, em seus 7 princípios de aplicações web ricas. Princípio sete: prever o comportamento. Busque os dados quando alguém passar o mouse sobre um link, para que estejam prontos quando clicarem. Desde então, os navegadores incorporaram isso à API de regras de especulação.

Acho que há uma escada aqui:

1. Invisível. O software prepara o que você provavelmente fará. Pré-busca. Você nunca vê isso.
2. Propõe. O software mostra o que você provavelmente fará e você aprova. Isso é usePredictive.
3. Atos. O software simplesmente faz isso. Tags que se apagam quando ninguém as usa. Você não precisa fazer nada, o sistema se limpa sozinho.

A maioria dos produtos fica presa na primeira etapa ou vai direto para o bate-papo. A etapa intermediária, uma boa estimativa na interface do usuário que você aceita com um clique, é onde eu gostaria que mais software estivesse.

Isso poderia ter sido um clique

No momento, a maior parte dessa etapa intermediária acontece em um bate-papo. Julian Lehr disse bem: as interfaces de bate-papo atuais do LLM são uma regressão das GUIs. Ações que costumavam ser links, botões ou atalhos de teclado agora são coisas que você precisa explicar durante uma conversa.

Também estou um pouco cansado de interfaces de chat. Não quero o próximo passo no texto. Quero isso na interface do usuário, exatamente onde faria de qualquer maneira, e quero sentir o que vem a seguir antes de me comprometer com isso.

E cada equipe constrói essa UI do zero. Painéis, fluxos de várias etapas, integração, cada um com seus próprios estados de carregamento, seu próprio tratamento de erros, sua própria maneira de sair do caminho. O mesmo padrão, sempre.

Então eu queria um gancho.

useOtimista, mas antes

Mesma forma, outra direção:

const (optimisticState, addOptimistic) = useOptimistic(state, updateFn);
const (prediction, dismiss) = usePredictive(state, predictFn);

Você passa o estado atual e uma função que faz uma estimativa. Você recebe de volta o palpite, ou nulle uma maneira de dizer “agora não”.

Assim como useOptimistic, a suposição é temporária. Pertence ao Estado para o qual foi criado e, quando o Estado segue em frente, desaparece.

Como você adivinha depende de você: algumas instruções if, o histórico do usuário, um modelo. O React não deveria se importar, e o gancho também não.

const (next, dismiss) = usePredictive(
  { step: project.step, members: project.members.length },
  ({ step, members }) => {
    if (step === "created" && members === 1) return "Invite your team";
    if (step === "invited") return "Connect a domain";
    return null;
  },
);

if (!next) return null;

return (
  p>
    Next: button onClick={()=> run(next)}>{next}button>
    button onClick={dismiss}>Not nowbutton>
  p>
);

A suposição também pode vir de um servidor ou modelo. predictFn pode ser assíncrono e obter um AbortSignalportanto, suposições desatualizadas são canceladas.

O gancho inteiro tem cerca de 50 linhas, um arquivo, sem dependências. É um esboço para copiar e alterar, não um pacote: usePredictive no GitHub.

Uma pergunta aberta

Quando você descarta uma suposição, ela permanece inativa até que o estado mude. Então, um novo palpite pode aparecer, até mesmo o mesmo. Está certo? Ou o gancho deveria lembrar o que você disse não? Ainda não tenho certeza. Se você construiu algo assim, adoraria saber como você fez isso. DM-me no X ou envie-me um e-mail.