Creating forms
Debounced mode

Debounced mode


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.


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.

  • Dot notation is used to access nested objects. For example, if you have an object with a nested object, you can access the nested object using dot notation;
  • Use dot notation to access nested arrays. For example, if you have an object with a nested array, you can access the nested array using dot notation; info.array[2].
function Form() {
  const { register } = useForm();
  return (
      <input {...register("name")} />
      <input {...register("address.street")} />
      <input {...register("")} />