Simple debounce state hooks
npm install use-debounce-stateuseState value._Hooks are not ready a for production. Checkout the official React Hooks features._
You must use at minimum react@16.7.0-alpha.0 to use this package.
npm install @piso/use-debounce-state
javascript
import React from "react";
import ReactDOM from "react-dom";
import { useDebounceState } from "@piso/use-debounce-state";function App() {
const [value, setValue, debounceValue] = useDebounceState('', 500);
return (
Debounce state example : {debounceValue}
setValue(e.target.value)} />
);
}ReactDOM.render(
`With useEffect
javascript
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { useDebounceState } from '@piso/use-debounce-state';function App() {
const [value, setValue, debounceValue] = useDebounceState('', 500);
const [users, setUsers] = useState([]);
// Just for example
useEffect(
() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => {
const filtered = users.filter(user =>
user.name.startsWith(debounceValue)
);
setUsers(filtered);
})
.catch(e => console.log(e));
},
[debounceValue]
);
return (
Search user : {debounceValue}
setValue(e.target.value)} />
{users.map(({ name, id }) => - {name}
)}
);
}ReactDOM.render(
``