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.
- 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;
info.name
. - 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 (
<form>
<input {...register('name')} />
<input {...register('address.street')} />
<input {...register('address.city')} />
</form>
);
}