codesnips

hooks

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 { z } from 'zod';

export const signupSchema = z
  .object({
    email: z.string().min(1, 'Email is required').email('Enter a valid email'),
    username: z

Field-Level Signup Validation with Zod and a Typed useZodForm Hook

react zod forms
by codesnips 3 tabs
typescript 
import React from 'react';
import { useToasts } from './useToasts';

export function Toaster() {
  const { toasts, dismiss } = useToasts();

Frontend: toast notifications via a small event bus

react frontend typescript
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
typescript 
import { useEffect, useState } from 'react';

export function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T) => void] {

Persisting a Dark-Mode Theme Toggle with a React ThemeProvider and localStorage

react context hooks
by codesnips 4 tabs
javascript 
import { useState, useEffect, useCallback } from 'react';

export function useLocalStorage(key, initialValue) {
  const readValue = useCallback(() => {
    if (typeof window === 'undefined') return initialValue;
    try {

Persist a React Shopping Cart to localStorage with a Context Provider

javascript react context
by codesnips 3 tabs
javascript 
function encodeCursor(row) {
  if (!row) return null;
  const payload = JSON.stringify({ t: row.created_at, id: row.id });
  return Buffer.from(payload, 'utf8').toString('base64url');
}

Cursor-Paginated REST Endpoint With a React Load More Button

react pagination cursor
by codesnips 4 tabs
typescript 
export type FetchState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: Error };

Discriminated-Union State Machine for a React Data-Fetching Hook

react hooks state-machine
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
typescript 
export interface Todo {
  id: string;
  title: string;
  completed: boolean;
}

Optimistic UI Updates with Rollback Using React Query useMutation

react react-query optimistic-ui
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