Easy to understand React Hook recipes by Gabe Ragland
What's all this about?

Hooks are a new addition in React that lets you use state and other React features without writing a class. This website provides easy to understand code examples to help you learn how hooks work and inspire you to take advantage of them in your next project. You may also like my React app builder ✨️

📩  Get new recipes in your inbox
Join 5,145 subscribers. No spam ever.


This hook allows you to debounce any fast changing value. The debounced value will only reflect the latest value when the useDebounce hook has not been called for the specified time period. When used in conjunction with useEffect, as we do in the recipe below, you can easily ensure that expensive operations like API calls are not executed too frequently. The example below allows you to search the Marvel Comic API and uses useDebounce to prevent API calls from being fired on every keystroke. Be sure to check out the CodeSandbox demo for this one. Hook code and inspiration from

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 
    () => {
      if (debouncedSearchTerm) {
        searchCharacters(debouncedSearchTerm).then(results => {
      } else {
    [debouncedSearchTerm] // Only call effect if debounced search term changes

  return (
        placeholder="Search Marvel Comics"
        onChange={e => setSearchTerm(}
      {isSearching && <div>Searching ...</div>}

      { => (
        <div key={}>

// API search function
function searchCharacters(search) {
  const apiKey = 'f9dfb1e8d466d36c27850bedd2047687';
  return fetch(
      method: 'GET'
    .then(r => r.json())
    .then(r =>
    .catch(error => {
      return [];
// Hook
function useDebounce(value, delay) {
  // State and setters for debounced value
  const [debouncedValue, setDebouncedValue] = useState(value);

    () => {
      // Update debounced value after delay
      const handler = setTimeout(() => {
      }, 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 () => {
    [value, delay] // Only re-call effect if value or delay changes

  return debouncedValue;
  • Divjoy - The easiest way to start your next React project. Pick everything you need, like auth, analytics, payments, and more + a nice looking template and then export a complete React codebase. It saves you weeks of development time.
Next recipe: