Debounced mode

Introduction

Debounce function forces a function to wait a certain amount of time before running again. The function is built to limit the number of times a function is called.

The debounce parameter delays the updating of the state until the user has stopped changing inputs for a predetermined amount of time.

The input value is set to state values and then updated via React events. Defining a form’s input value via state is considered a controlled component. For controlled inputs, you will need a corresponding state and then a function to update that state with changes.

React Docs (opens in a new tab)

It means that whenever state is changed the component, it is rendered again.

If you want to use this kind of form, you need only pass property mode:'debounced'.

Also, it means that the validations are run in every state change, providing better user feedback. See more in Controlled Inputs with validation.

Usage

Createform provides a register function, this function returns all properties to manager a field.

import { createForm } from '@createform/react';
 
const useForm = createForm({
  initialValues: {
    name: 'Anna',
    address: [
      {
        street: '123 Main St',
        city: 'Anytown',
      },
    ],
  },
  mode: 'debounced',
});

Use dot notation to create advanced objects or to map object values. Type an entry name and type or an entry property object.

function Form() {
  const { register } = useForm();
 
  return (
    <form>
      <input {...register('name')} />
      <input {...register('address.street')} />
      <input {...register('address.city')} />
    </form>
  );
}

Demo