React form with Debounced Input

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 be 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


It means that every change in state your component, it is mounted again.

If you want to use this kind of form, you need only pass property debounce:300 whit a time in object received in useForm hook.

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

Instalation

npm install useforms
yarn add useforms

Usage

useForm provides a input function, this function as a link with input and a object property of form state.

import {useForm} from 'useforms'
/*
* initial Values optional
*/
const initialValues = {
data1:"test",
data2:"test2",
complextData:[
{
first:"testComplexData",
score:45
}
]
}
const [{values},{input}] = useForm({initialValues, debounce:300})

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

<input {...input("data1", "number")}/>
<input {...input("complexData.0.first", "text")}/>
/*or*/
<input {...input({name:"complexData.0.score", type:"number"})}/>

Demo

{}