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
class DeadlineError extends Error {
  constructor(message = 'request deadline exceeded') {
    super(message);
    this.name = 'DeadlineError';
    this.code = 'DEADLINE_EXCEEDED';
  }

Enforce Per-Request Timeouts by Aborting Downstream Fetches with AbortSignal

node fetch abortcontroller
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';

interface FetchState<T> {
  data: T | null;
  error: Error | null;
  loading: boolean;

Cancel Stale Autocomplete Requests with AbortController in a useFetch Hook

react hooks abortcontroller
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