Last active
March 21, 2022 19:42
-
-
Save gragland/e50346f02e7edf4f81cc0bda33d3cae6 to your computer and use it in GitHub Desktop.
React Hook recipe from https://usehooks.com. Demo: https://codesandbox.io/s/711r1zmq50
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useEffect, useRef } from 'react'; | |
// Usage | |
function App() { | |
// State and setters for ... | |
// Search term | |
const [searchTerm, setSearchTerm] = useState(''); | |
// API search results | |
const [results, setResults] = useState([]); | |
// Searching status (whether there is pending API request) | |
const [isSearching, setIsSearching] = useState(false); | |
// Debounce search term so that it only gives us latest value ... | |
// ... if searchTerm has not been updated within last 500ms. | |
// The goal is to only have the API call fire when user stops typing ... | |
// ... so that we aren't hitting our API rapidly. | |
const debouncedSearchTerm = useDebounce(searchTerm, 500); | |
// Effect for API call | |
useEffect( | |
() => { | |
if (debouncedSearchTerm) { | |
setIsSearching(true); | |
searchCharacters(debouncedSearchTerm).then(results => { | |
setIsSearching(false); | |
setResults(results); | |
}); | |
} else { | |
setResults([]); | |
} | |
}, | |
[debouncedSearchTerm] // Only call effect if debounced search term changes | |
); | |
return ( | |
<div> | |
<input | |
placeholder="Search Marvel Comics" | |
onChange={e => setSearchTerm(e.target.value)} | |
/> | |
{isSearching && <div>Searching ...</div>} | |
{results.map(result => ( | |
<div key={result.id}> | |
<h4>{result.title}</h4> | |
<img | |
src={`${result.thumbnail.path}/portrait_incredible.${ | |
result.thumbnail.extension | |
}`} | |
/> | |
</div> | |
))} | |
</div> | |
); | |
} | |
// API search function | |
function searchCharacters(search) { | |
const apiKey = 'f9dfb1e8d466d36c27850bedd2047687'; | |
return fetch( | |
`https://gateway.marvel.com/v1/public/comics?apikey=${apiKey}&titleStartsWith=${search}`, | |
{ | |
method: 'GET' | |
} | |
) | |
.then(r => r.json()) | |
.then(r => r.data.results) | |
.catch(error => { | |
console.error(error); | |
return []; | |
}); | |
} | |
// Hook | |
function useDebounce(value, delay) { | |
// State and setters for debounced value | |
const [debouncedValue, setDebouncedValue] = useState(value); | |
useEffect( | |
() => { | |
// Update debounced value after delay | |
const handler = setTimeout(() => { | |
setDebouncedValue(value); | |
}, delay); | |
// Cancel the timeout if value changes (also on delay change or unmount) | |
// This is how we prevent debounced value from updating if value is changed ... | |
// .. within the delay period. Timeout gets cleared and restarted. | |
return () => { | |
clearTimeout(handler); | |
}; | |
}, | |
[value, delay] // Only re-call effect if value or delay changes | |
); | |
return debouncedValue; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
For a reference, here's an alternative implementation at @react-hook/debounce, along with a description why it's supposedly superior: jaredLunde/react-hook#35