Transcript
00:00:00O React acabou de ganhar uma nova ferramenta super interessante que muda completamente a forma como pensamos sobre
00:00:05renderizar elementos de interface interativos como modais, diálogos ou caixas de confirmação.
00:00:11Chama-se React Call.
00:00:13Se você já criou um assistente de formulário complexo de várias etapas, um modal de confirmação ou um
00:00:18seletor de itens no React, você já sabe que gerenciar estados de abertura, passar retornos de sucesso e
00:00:24lidar com promessas pode transformar seu código em uma bagunça absoluta.
00:00:28Mas o React Call foi projetado para resolver esse problema.
00:00:31Então, no vídeo de hoje, vamos dar uma olhada no React Call, ver como funciona e conferir
00:00:36alguns exemplos de código.
00:00:37Vai ser muito divertido, então vamos nessa.
00:00:44Então, o que exatamente é o React Call?
00:00:47Bem, é um utilitário pequeno e leve que permite que você chame componentes React como funções
00:00:52assíncronas.
00:00:53Pense na API nativa window.confirm do navegador.
00:00:57Quando você a chama, seu código literalmente pausa, espera o usuário clicar em OK ou cancelar, e
00:01:03retorna um valor booleano diretamente na linha.
00:01:06Isso mantém sua lógica de negócios totalmente local ao chamador.
00:01:09E o React Call traz exatamente esse mesmo modelo mental intuitivo para o mundo React moderno.
00:01:16Em vez de criar uma variável de estado separada como isModalOpen, passar um onClose ou um
00:01:22prop onSubmit, e configurar provedores de contexto complexos ou portais, você pode simplesmente aguardar
00:01:29a resposta do componente.
00:01:30Por baixo dos panos, ele abstrai o gerenciamento de promessas, lida com solicitações e respostas de tipos
00:01:36prontamente e suporta totalmente a substituição de módulos a quente (HMR), para que seu fluxo de desenvolvimento
00:01:41continue rápido.
00:01:42E ele traz três conceitos para a mesa: root e stack, upsert e fluxo de mutação.
00:01:48O primeiro conceito principal é root (raiz) e stack (pilha).
00:01:50Com o React Call, o componente chamável que você cria não é uma função.
00:01:54Ele realmente atua como seu próprio ponto de montagem na árvore da sua aplicação.
00:01:58Você coloca o componente como uma tag root em qualquer lugar visível, como no seu arquivo app ou em um
00:02:03arquivo de layout de alto nível, e ele fica lá como um ouvinte.
00:02:06Quando você dispara várias chamadas, o React Call as gerencia usando uma pilha interna, e
00:02:11ele lida com a renderização de cada instância ativa automaticamente.
00:02:14E também lida com animações de saída limpas quando fecham e mantém as instâncias isoladas para que
00:02:20não interfiram umas nas outras.
00:02:22O próximo é o upsert, que é uma salvação absoluta para padrões de interface singleton.
00:02:27Normalmente, se você chamar um componente várias vezes, ele empilha uma nova instância na pilha.
00:02:33Mas e se você estiver criando um toast de notificação global, ou uma sobreposição de carregamento, ou um indicador de progresso
00:02:39onde você só quer uma instância na tela por vez?
00:02:45Bem, em vez de executar call, você pode executar upsert.
00:02:48E se uma instância já estiver ativa, ele atualiza suavemente o componente existente com seus novos
00:02:52dados, em vez de gerar um duplicado.
00:02:56E, finalmente, temos o fluxo de mutação.
00:02:58Essa biblioteca inclui um hook useMutationFlow integrado, projetado especificamente para vincular sua interface
00:03:04chamável diretamente a ações assíncronas.
00:03:06Se você tem um modelo de confirmação que dispara uma solicitação de API backend pesada ao enviar, o hook
00:03:12gerencia o estado pendente para você prontamente.
00:03:15Ele garante que o modelo permaneça aberto e mostre um spinner de carregamento enquanto a função assíncrona é executada e
00:03:21só encerra oficialmente a chamada quando a promessa for resolvida com sucesso.
00:03:25Então, ele conecta lindamente o estado da sua interface e suas mutações de dados.
00:03:29Então agora vamos ver alguns exemplos práticos no site deles, porque acho que eles são super
00:03:34autoexplicativos.
00:03:36E acho que eles também mostram o quão pouco código você realmente precisa escrever para fazer algo funcionar.
00:03:41Então, por exemplo, no diálogo de confirmação, só precisamos criar um chamável aqui.
00:03:48E então envolvemos nosso componente como um componente de ordem superior com esse hook create callable.
00:03:54E então podemos passar o call e as funções para nossos cliques nos botões.
00:04:01E isso é tudo que precisamos para o objeto chamável.
00:04:04E na raiz, só precisamos importar o componente em si.
00:04:08E para o botão de deletar, já que nosso componente de confirmação está envolvido com a função
00:04:14de ordem superior create callable, podemos simplesmente invocá-lo assincronamente nesta função handle click.
00:04:21Muito legal, muito organizado, sem muito código repetitivo.
00:04:26E você não precisa usar nenhum provedor de contexto ou variáveis de estado ou redux ou zustand.
00:04:31E se você quiser se aprofundar em quantos casos de uso existem, você pode conferir a seção
00:04:36de exemplos, e cada exemplo também fornece um trecho de código.
00:04:40Alguns deles são até altamente complexos, como, por exemplo, os que lidam com ações assíncronas
00:04:46executando em segundo plano.
00:04:49Então você pode conferir todos esses exemplos legais.
00:04:52Acho super legal e super leve.
00:04:55Muito bem.
00:04:56Então é isso, pessoal.
00:04:57Isso é React Call em poucas palavras.
00:04:59Bem, você certamente poderia programar um wrapper de promessa personalizado básico ou um modal único você mesmo.
00:05:06Acho que esta biblioteca lida com todos os casos extremos complicados lindamente, como lidar com múltiplas
00:05:11instâncias ativas em uma pilha ou atualizar singletons via upsert e sincronizar estados de UI com mutações
00:05:17pesadas de backend.
00:05:18Então, acho que é um utilitário super legal e leve para manter no seu kit de ferramentas de frontend para uma arquitetura React
00:05:24mais limpa e legível.
00:05:26O que você acha do React Call?
00:05:28Você gosta desse padrão?
00:05:29Você vai usá-lo em seus projetos?
00:05:31Deixe-nos saber na seção de comentários abaixo.
00:05:33E pessoal, se vocês gostam desses tipos de detalhamentos técnicos, por favor, me avisem esmagando
00:05:37aquele botão de curtir abaixo do vídeo.
00:05:39E também não se esqueça de se inscrever no nosso canal.
00:05:42Este foi Andrus da BetterStack, e vejo vocês nos próximos vídeos.
00:05:58você
Community Posts
No posts yet. Be the first to write about this video!
Write about this video