React Patterns

Custom React Hooks

Collection of reusable custom hooks for common patterns like debouncing, local storage, and media queries.

ReactTypeScriptHooks

useDebounce Hook

Type in the input below. The search will only trigger after you stop typing for 500ms.

Immediate Value:

(empty)

Debounced Value:

(empty)

API Calls Made: 0

useLocalStorage Hook

Your data persists across page refreshes. Try refreshing the page!

Your Name:

Theme Preference:

Stored in localStorage:

{
  "name": "",
  "theme": "dark"
}

useMediaQuery Hook

Resize your browser window to see the responsive detection in action.

📱 Mobile

≤ 768px

Inactive

💻 Tablet

769px - 1024px

Inactive

🖥️ Desktop

≥ 1025px

Inactive

Code

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value)
  
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)
    
    return () => clearTimeout(handler)
  }, [value, delay])
  
  return debouncedValue
}