Existem muitas bibliotecas disponíveis para criar e gerenciar formulários. No React, os formulários sempre foram um pouco complexos. Bibliotecas de formulários visam simplificar o gerenciamento de formulários sem comprometer o desempenho.
Neste artigo, veremos React Final Form , uma biblioteca popular para gerenciamento de formulários. Vamos cobrir como funciona o formulário final do React, compará-lo com alguns concorrentes e, finalmente, testá-lo com um exemplo relevante. Vamos começar!
O que é React Final Form?
O React Final Form é uma biblioteca de formulários leve escrita em JavaScript principal que atua como um wrapper em torno de Final Form , uma biblioteca de gerenciamento de estado de formulário.
O formulário final do React usa o padrão de design do observador no qual os componentes assinam eventos específicos. Em vez da re-renderização de todo o formulário, apenas os campos que foram inscritos são renderizados novamente.
Vejamos alguns dos principais recursos do React Final Form.
Tamanho mínimo do pacote
React Final Form é um invólucro simples da biblioteca Final Form. Ele tem zero dependências e é escrito em JavaScript puro, o que o torna um framework agnóstico. O tamanho do pacote do React Final Form é apenas 3.2kB reduzido e gzipado.
Simplicidade
Devido ao seu gerenciamento de estado de formulário simples, React Final Form enfatiza a escrita de código para a funcionalidade necessária em vez de escrever código desnecessariamente para formulários simples. O design do React Final Form é altamente modular, tornando-o uma escolha perfeita para muitos casos de uso.
Alto desempenho
Embora a re-renderização não seja um grande problema em formulários pequenos, como o tamanho do formulário aumenta, vemos um atraso significativo no desempenho a cada nova renderização. Devido ao seu padrão baseado em assinatura, o React Final Form apenas renderiza novamente os campos obrigatórios, evitando atrasos.
Agora que sabemos os fundamentos do React Final Form, vamos dar uma olhada no Formik, uma biblioteca semelhante, para ver como os dois se comparam.
Comparação com Formik
Formik é uma biblioteca que auxilia os desenvolvedores em três áreas de escrita do código React: obter valores dentro e fora do estado do formulário, mensagens de validação e erro e envio de formulário.
Popularidade e comunidade
Vejamos as duas bibliotecas nas tendências npm para medir a popularidade e o tamanho da comunidade. Vemos que nos últimos seis meses, Formik obteve um número maior de downloads semanais do que React Final Form.
No GitHub, React Final Form tem 6,6 mil estrelas, enquanto Formik tem 27,7 mil estrelas. Formik claramente tem uma comunidade online maior, no entanto, há muitos tópicos e fóruns para ambas as bibliotecas, o que significa que você deve receber o suporte da comunidade.
Conforme visto na captura de tela abaixo, as duas bibliotecas são atualizadas com frequência:
O formulário final do React atualmente tem menos problemas abertos no GitHub do que no Formik, mas isso pode mudar no futuro se a popularidade da biblioteca crescer.
Tamanho e dependencies
O tamanho do pacote do Formik é 13kB , que é maior do que o tamanho do pacote do React Final Form de 3,2 kB.
Abaixo, podemos ver a composição do pacote para ambas as bibliotecas. O formulário final do React tem menos dependências, reduzindo a chance de a biblioteca quebrar quando atualizada.
Configurando o formulário final do React
Vamos testar o formulário final do React funcionalidade iniciando nosso próprio projeto. Configure um projeto React e instale a biblioteca React Final Form executando o seguinte comando:
npm install–save final-form react-final-form
Assim que a biblioteca estiver instalada, importe os componentes principais do biblioteca da seguinte forma:
import {Form, Field} from’react-final-form’
Observe que no trecho de código acima, importamos dois componentes, Form e Field. Form é o componente pai que pega todos os adereços para o gerenciamento de nosso formulário, e Field envolve os elementos HTML para criar um componente Final Form independente. O componente criado por Field tem seu próprio estado que é gerenciado pela tag Form.
Vamos escrever o código para um formulário de entrada simples no Form Final React. Nosso código contém campos de entrada para firstName e lastName. Também adicionamos um botão de envio:
/* eslint-disable jsx-a11y/accessible-emoji */import React from’react’import {render} from’react-dom’import Estilos from’./Styles’import {Form, Field} de’react-final-form’const sleep=ms=> new Promise (resolve=> setTimeout (resolve, ms)) const onSubmit=async values => {await sleep (300) window.alert (JSON.stringify (values, 0, 2))} const App=()=> (
React Final Form-Simple Example
)}/> ) render (
Iniciar o servidor nos dá o seguinte saída.
Estamos chamando dois logs, um do Formulário e um do Campo. Vamos tentar inserir sam em FirstName para ver o que acontece!
Observe que o formulário é renderizado apenas uma vez. O componente Field mostra um comportamento independente porque é renderizado o mesmo número de vezes que o número de caracteres inseridos. No React, devemos sempre ter como objetivo um número menor de re-renderizações para evitar atrasos conforme o tamanho do nosso formulário aumenta.
Usamos um render prop , que nos dá acesso a diferentes props do componente Form. Veja o resultado final do nosso exemplo abaixo:
Agora que vimos como funciona o React Final Form, vamos executar o mesmo exemplo usando Formik.
Setting up Formik
Como antes, vamos configurar um formulário simples com um campo para firstName, um campo para lastName e um botão de envio. Vamos chamar nosso formulário de Perfil do Cliente:
import React from”react”; importar ReactDOM de”react-dom”; importar {Formik, Form, Field} de”formik”;//Função padrão de exportação de mensagens App () {return (
Perfil do cliente
)} ); } const rootElement=document.getElementById (“root”); ReactDOM.render (
Na primeira renderização, nosso formulário se parece com a imagem abaixo:
Colocamos um log dentro da tag Form que acompanhará as renderizações. Vamos inserir Sam no campo de entrada. Obtemos a seguinte saída:
Observe que o formulário foi renderizado novamente um total de nove vezes quando inserimos um valor de entrada, em oposição à renderização única do React Final Form. Vamos considerar esses exemplos em profundidade.
proposta de assinatura
No React Final Form, o componente Form pega a proposta de assinatura, que implementa o padrão de design do observador e causa menos renderizações. A proposta de assinatura é semelhante ao Gancho useEffect porque observa os valores que foram passados a ele e os processa novamente sempre que eles são alterados.
No bloco de código Formik acima, não passamos valores dentro do prop. Em vez disso, o Form está monitorando {submetendo || pristine} para alterações.
Validação
O formulário final do React oferece dois tipos de validações: validação em nível de formulário e validação em nível de campo. Com a validação em nível de campo, você pode executar a validação enquanto o Campo está sendo alterado. Na validação em nível de formulário, os testes de validação são executados quando o formulário é enviado.
Formik tem um mecanismo semelhante para validação usando um validationSchema . Portanto, ambas as bibliotecas são iguais neste aspecto.
Conclusão
O paradigma do React Final Form para lidar com formulários é diferente de outras bibliotecas. Ele lida com o problema de re-renderização de diferentes bibliotecas de forma eficiente usando o padrão de design do observador.
Não só o React Final Form é menor em tamanho do que o Formik, como também é mais rápido. Portanto, se você deseja criar formulários grandes e complexos para seu aplicativo React sem comprometer o desempenho, o React Final Form é a melhor escolha.
