abortcontroller

typescript
import { useEffect, useState } from "react";

export function useDebounce<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState<T>(value);

  useEffect(() => {

Debounced search input (React)

react hooks debounce
by codesnips 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input"]
  static values = { wait: { type: Number, default: 300 }, url: String }

Stimulus: debounced search that plays nicely with Turbo

rails stimulus hotwire
by codesnips 3 tabs
javascript
import { useCallback, useEffect, useRef, useState } from 'react';

export function usePaginatedFetch(fetchPage, { pageSize = 20 } = {}) {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

Infinite Scroll in React with IntersectionObserver and a Paginated Fetch Hook

react hooks infinite-scroll
by codesnips 3 tabs
javascript
import { useEffect, useState } from "react";

export function useDebouncedValue(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {

Debounced Search Input in React with a Reusable useDebouncedValue Hook

react hooks debounce
by codesnips 3 tabs
javascript
const BASE_URL = "/api/search";

export async function searchProducts(query, { signal } = {}) {
  const params = new URLSearchParams({ q: query, limit: "10" });
  const res = await fetch(`${BASE_URL}?${params}`, {
    signal,

Cancel Stale Autocomplete Requests with AbortController in a React Hook

react hooks abortcontroller
by codesnips 3 tabs
typescript
export class TimeoutError extends Error {
  constructor(public readonly ms: number) {
    super(`Request timed out after ${ms}ms`);
    this.name = "TimeoutError";
  }
}

HTTP client timeout with AbortController (fetch)

fetch abortcontroller timeout
by codesnips 3 tabs
typescript
export interface Page<T> {
  items: T[];
  nextCursor: string | null;
}

export interface Post {

Infinite-Scroll List in React with IntersectionObserver and Cursor Pagination

react hooks infinite-scroll
by codesnips 3 tabs
typescript
import { useEffect, useState } from "react";

export function useDebouncedValue<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState<T>(value);

  useEffect(() => {

Debounced Search Box With AbortController to Cancel Stale Fetches in React

react hooks debounce
by codesnips 3 tabs
typescript
import { useEffect, useState } from "react";

export function useDebouncedValue<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState<T>(value);

  useEffect(() => {

Build a Debounced Search Box in React with a Reusable useDebouncedValue Hook

react hooks typescript
by codesnips 3 tabs
javascript
import { useEffect, useState } from "react";

export function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {

Debounced Search Box With Live Autocomplete in React

react hooks debounce
by codesnips 3 tabs
javascript
const RETRYABLE_STATUS = new Set([408, 429, 500, 502, 503, 504]);

export function fullJitter(attempt, baseDelay = 300, maxDelay = 10_000) {
  const ceiling = Math.min(maxDelay, baseDelay * 2 ** attempt);
  return Math.random() * ceiling;
}

Fetch With Exponential Backoff and Full Jitter Retries

fetch retry exponential-backoff
by codesnips 3 tabs