React Hook Form

O que é

React Hook Form é um pacote para lidar com o estado dos inputs em um formulário e forma não controlada (não salvar no estado). Desse jeito ganhamos performance de não precisar renderizar todo o formulário/input à cada alteração e conseguir montar um objeto complexo no submit.

Como usar

A forma como geralmente utilizamos em nossos projetos é criando componentes de input já ligados dentro do Hook Form.

Um exemplo de um Checkbox controlado pelo pacote seria assim:

const FormSwitch: React.FC<FormCheckboxProps> = (props) => {
  const { control, errors } = useFormContext(); // Consumindo valores salvos no hook-form
  const { name, ...inputProps } = props;

  return (
    <Form.Item validateStatus={errors[name] ? 'error' : null} help={errors[name] || null} valuePropName="checked">
      {/* Controller permite usar os componentes do ant-design com o hook-form controlando */}
      <Controller
        name={name}
        control={control}
        render={(props) => (
          <Checkbox {...inputProps} checked={props.value}>
            {inputProps.label}
          </Checkbox>
        )}
        defaultValue={!!inputProps.defaultValue}
      />
    </Form.Item>
  );
};

Como aprender

Por ser um componente de lógica um pouco mais complexa, o ideal é realmente conseguir implementar um formulário utilizando o React Hook Form e Inputs do Ant Design. O mínimo que você deve conhecer é:

Material útil

Validando o conhecimento

  • Criar projeto básico com create-react-app e fazer um form simples que consegue preencher diferentes tipos de dados e dar submit depois pelo hook-form.

Possíveis problemas

  • O defaultValues é definido no primeiro render, então se o componente se montar em um estado de loading e depois você tentar popular com dados vindos da API, é possível que o form fique em branco. O que você pode fazer é remontar o componente depois que a requisição chegar ou esperar os dados para montar o componente;
← Media QueriesRedux →