codesnips

state-management

typescript 
import { useMemo } from "react";

export type SortDir = "asc" | "desc";
export interface SortConfig<T> {
  key: keyof T;
  dir: SortDir;

Memoized Async Search With a Cached Selector Hook in React

react hooks usememo
by codesnips 3 tabs
typescript 
import React from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import App from './App'
import './index.css'

React Query for server state management

react react-query state-management
by Maya Patel 2 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 
export const initialCart = { items: {} };

export function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM': {
      const { product, qty = 1 } = action;

Persist and Hydrate a Shopping Cart with useReducer and localStorage

react hooks usereducer
by codesnips 3 tabs
typescript 
import { Injectable, computed, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LoadingService {
  private readonly activeRequests = signal(0);

Global Loading Spinner via In-Flight Request Tracking in an Angular HttpInterceptor

angular http-interceptor rxjs
by codesnips 4 tabs
javascript 
export const MAX_VISIBLE = 4;

const DEFAULTS = {
  variant: "info",
  duration: 4000,
};

Toast Notification Queue in React with Context and useReducer

react context-api usereducer
by codesnips 3 tabs
typescript 
export interface UseClipboardResult {
  copied: boolean;
  error: Error | null;
  copy: (value: string) => Promise<boolean>;
}

Copy-to-Clipboard Button With a useClipboard Hook and Timed Success Feedback

react hooks clipboard
by codesnips 3 tabs
typescript 
export interface Todo {
  id: string;
  title: string;
  done: boolean;
  pending: boolean;
}

Optimistic To-Do Toggle in React with Rollback via useReducer

react optimistic-ui hooks
by codesnips 3 tabs
typescript 
export interface CartItem {
  sku: string;
  name: string;
  unitPrice: number; // cents
  qty: number;
}

Shopping Cart Pricing with a useReducer State Machine and a Pure Discount Engine

react usereducer typescript
by codesnips 3 tabs
hcl 
# Backend configuration with S3 + DynamoDB locking
terraform {
  backend "s3" {
    bucket         = "company-terraform-state"
    key            = "services/web-app/terraform.tfstate"
    region         = "us-east-1"

Terraform state management and workspace strategies

terraform state-management iac
by Ryan Nakamura 2 tabs
javascript 
export const required = (msg = 'This field is required') => (value) =>
  value && value.trim() !== '' ? '' : msg;

export const minLength = (n, msg) => (value) =>
  value && value.length >= n ? '' : msg || `Must be at least ${n} characters`;

Field-by-Field Signup Validation with a Reusable useForm Hook in React

react hooks forms
by codesnips 4 tabs
typescript 
import { useCallback, useEffect, useState } from "react";

type Patch = Record<string, string | null | undefined>;

function readParams(): URLSearchParams {
  return new URLSearchParams(window.location.search);

Sync a Filter Panel to the URL Query String with a Custom useSearchParams Hook

react hooks url-state
by codesnips 3 tabs