React Hooks Cheatsheet

Custom Data Fetching:

function useApi<T>(url: string) {
  const [data, setData] = useState<T | null>(null)
  const [loading, setLoading] = useState(true)
  
  useEffect(() => {
    fetch(url).then(r => r.json()).then(setData).finally(() => setLoading(false))
  }, [url])
  
  return { data, loading }
}

Local Storage Hook:

function useLocalStorage(key: string, initial: string) {
  const [value, setValue] = useState(() => 
    localStorage.getItem(key) ?? initial
  )
  
  useEffect(() => {
    localStorage.setItem(key, value)
  }, [key, value])
  
  return [value, setValue] as const
}

Debounced Input:

function useDebounce(value: string, delay: number) {
  const [debounced, setDebounced] = useState(value)
  
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay)
    return () => clearTimeout(timer)
  }, [value, delay])
  
  return debounced
}