O que há de novo no React Hook Form V7

Para obter formulários estritamente digitados, precisaremos declarar um alias de tipo (vamos chamá-lo de FormValues ​​) acima do corpo de nossa função e passá-lo para useForm como um tipo genérico:

 import React from'react';
import {useForm} de'react-hook-form' function App () { const {registrar}=useForm  () tipo FormValues ​​={ firstName: string, email: string, número de telefone, gênero: qualquer } Retorna ( //... );
}
exportar aplicativo padrão;

Este alias contém especificações de tipo para os tipos permitidos em cada campo de entrada.

Ao passá-lo para useForm , FormValues ​​ agora atua como uma espécie de esquema para garantir que o nome de qualquer campo de entrada se correlacione com uma chave no alias e os valores inseridos nos campos de entrada atendem às especificações de tipo.

Com isso implementado, agora podemos usar a função registrar do React Hook Form para registrar os campos de entrada que criamos. Mas antes de registrarmos esses campos, devemos apontar a mudança de sintaxe para a função de registro na versão 7.

Antes deste novo lançamento, a sintaxe usada para registrar um campo de entrada no React Form Hook era assim:

 
> 

O nome do campo de entrada que queremos que react-hook-form retorne teve que ser armazenado no atributo name do HTML 5. Embora funcione bem, tem limitações.

. A função de registro foi modificada para tomar o nome do campo de entrada (como seu primeiro argumento) e usá-lo para verificar o tipo em relação a qualquer alias passado em useForm :

As seguintes propriedades seriam distribuídas na entrada:

 const {onChange, blur, ref, name}=register ('firstName')

Agora, vamos usar a função de registro em cada campo, mas vamos cometer um erro de digitação intencionalmente na entrada do e-mail para ver como o TypeScript reage:

Os benefícios desse recurso são inegáveis. Com formulários rigidamente digitados, você pode ter certeza de que os dados corretos estão sendo enviados ao servidor pelo usuário e que os bugs são removidos do seu código antes mesmo do tempo de execução. Essa é uma grande vitória, se você me perguntar.

Tamanho de pacote reduzido

O React Hook Form V7 reduz o tamanho da embalagem em 13 por cento. Isso se deve ao tamanho reduzido do pacote do resolvedor.

A tabela abaixo mostra as mudanças no tamanho de cada arquivo:

Desempenho aprimorado

A equipe React fez um grande esforço para aprimorar o desempenho da biblioteca React Hook Form, incluindo a introdução de um novo gancho personalizado e melhorias em alguns ganchos existentes na API.

Vamos examinar essas melhorias em mais detalhes.

useFormState (novo)

A introdução deste novo gancho permite que você assine o estado de formulário individual, tornando cada entrada controlada completamente isolada em termos de re-renderização.

Isso significa que quando você precisa se inscrever em uma parte de um formulário, apenas essa parte é renderizada novamente com qualquer alteração em seu estado, e não o aplicativo inteiro no nível raiz. Esta renderização isolada também é aplicável a useController e Controller .

Por exemplo, digamos que queremos ser notificados sobre qualquer campo de entrada tocado pelo usuário. Este é um exemplo de estado de nível de componente. Podemos fazer isso com useFormState :

 import * as React from"react";
import {useForm, useFormState} de"react-hook-form"; função padrão de exportação App () { const {registrar, controlar}=useForm (); const {TouchFields}=useFormState ({control}); console.log (TouchFields) Retorna ( 
    
 );
} //Objeto registrado no console quando o usuário toca o campo de entrada firstName
{firstName: true} //Objeto registrado quando o usuário toca ambos os campos
{firstName: true, lastName: true}

Cada vez que um campo de entrada é tocado e um objeto é registrado no console, o estado do formulário existente na outra entrada não é alterado porque o aplicativo inteiro não é renderizado novamente.

Para que useFormState funcione, o objeto control de useForm deve ser passado para ele porque este objeto contém métodos para registrar componentes em react-hook-form .

Usar este gancho permite melhor desempenho em aplicativos de formulário grandes e complexos. Confira a lista completa de propriedades que podem ser assinadas com useFormState .

useFieldArray

Este gancho personalizado não viu nenhuma mudança em sua sintaxe, mas teve melhorias nos bastidores. A estrutura de dados usada na manutenção deste gancho foi aprimorada, permitindo um desempenho mais rápido. Ele também permite um gerenciamento de foco aprimorado, o que significa que você pode direcionar qualquer entrada para o foco, desde que exponha seu atributo ref.

useWatch

useWatch viu uma melhoria em seu mecanismo de observação, tornando mais fácil inscrever-se para alterações no formulário.

Suporte removido para IE 11

Como qualquer outra comunidade com visão de futuro no mundo da tecnologia, a equipe React encerrou o suporte para o Internet Explorer 11 com React Hook Form V7. A própria Microsoft pare de suportar o IE 11 até 17 de agosto de 2021 , então é seguro dizer que não teremos mais que nos preocupar com o IE 11 no mundo do desenvolvimento web.

Apesar dessa mudança, o React Hook Form V6 ainda será mantido para oferecer suporte ao IE 11. Discutiremos detalhes sobre a migração para a versão mais recente em breve.

Novas melhorias no Resolver

Se você já usou o React Hook Form anteriormente, conhece a função de resolução e provavelmente sabe como usá-la com pacotes de validação como Sim . React Hook Form V7 traz novas melhorias para esta API, introduzindo um terceiro argumento para a base de código:

-resolvedor: (valores: qualquer, contexto ?: objeto)=> Promessa  | ResolverResult
+ resolvedor: (
+ valores: qualquer,
+ contexto: objeto | Indefinido,
+ opções: {
+ criteriosModo ?:'firstError'|'tudo',
+ nomes ?: string [],
+ campos: {[nome]: Campo}//Suporta campos aninhados
+}
+)=> Promessa  | ResolverResult

O novo argumento options dá a outras bibliotecas uma visão do processo de validação e permite que os desenvolvedores escrevam uma lógica personalizada melhor para:

• O ptimizar esquema validação com validação em nível de campo
• Obtenha uma visão melhor de qual campo está sendo validado
• Personalize o foco gestão

Agradecemos a Joris , um contribuidor principal do projeto React Hook Form, pelos exemplos.

O React Hook Form V7 também oferece suporte a outras bibliotecas de validação, como Zod , Colete , Joi e Superstruct .

As opções de validação assíncrona e síncrona também foram adicionadas à API do resolver , com async sendo a opção padrão. Podemos alternar entre os dois usando o argumento mode :

 useForm ({resolver: yupResolver (schema, schemaOptions, {mode:"async"|"sync"})})

A opção async está disponível em todas as bibliotecas de validação externa, exceto Superstruct.

Migração do React Hook Form V6 para V7

Bill Luo , o criador do React Hook Form, reuniu um guia detalhado para ajudá-lo a migrar seus aplicativos V6 existentes para React Hook Form V7. O guia inclui alterações que você precisará fazer em seu código e outras informações importantes que você precisará para fazer seus aplicativos existentes funcionarem com React Hook Form V7.

A postagem O que há de novo no formulário React Hook V7 apareceu primeiro no LogRocket Blog .

Source link