typescript

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
typescript
export type ErrorCode =
  | 'VALIDATION'
  | 'UNAUTHENTICATED'
  | 'FORBIDDEN'
  | 'NOT_FOUND'
  | 'CONFLICT'

API error shape that frontend can rely on

typescript express react
by codesnips 4 tabs
typescript
import { Queue } from "bullmq";
import { createHash } from "crypto";

export const connection = { host: "127.0.0.1", port: 6379 };

export interface ChargePayload {

BullMQ job idempotency via dedupe id

node redis background-jobs
by codesnips 3 tabs
typescript
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function getFeedNaive(limit = 20) {
  const posts = await prisma.post.findMany({

Prisma: avoid N+1 with include/select

prisma performance typescript
by codesnips 3 tabs
typescript
import { Module } from '@nestjs/common';
import { BullModule } from '@nestjs/bull';
import { ScheduleModule } from '@nestjs/schedule';
import { DigestProducer } from './digest.producer';
import { DigestProcessor } from './digest.processor';

Scheduling and Processing Email Digests with a Bull Queue in NestJS

nestjs bull redis
by codesnips 3 tabs
typescript
import { AsyncLocalStorage } from 'node:async_hooks';

interface Store {
  requestId: string;
}

Propagate a Request ID Through NestJS Logs with AsyncLocalStorage

nestjs logging middleware
by codesnips 4 tabs
typescript
import { FixedSizeList as List } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
import { Post } from '@/types'
import { PostCard } from './PostCard'

interface VirtualizedPostListProps {

Virtual scrolling for large lists with react-window

react performance virtual-scrolling
by Maya Patel 1 tab
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
import { z } from "zod";

const booleanFromString = z
  .string()
  .transform((v) => v.trim().toLowerCase())
  .pipe(z.enum(["true", "false", "1", "0"]))

Type-Safe Environment Variable Parsing and Validation With Zod

config zod environment
by codesnips 3 tabs
typescript
import { useEffect, useRef } from "react";

const FOCUSABLE = [
  "a[href]",
  "button:not([disabled])",
  "textarea:not([disabled])",

Trap Keyboard Focus in a Modal with a useFocusTrap React Hook

react hooks accessibility
by codesnips 3 tabs
typescript
import { S3Client } from "@aws-sdk/client-s3";
import { createPresignedPost, PresignedPost } from "@aws-sdk/s3-presigned-post";
import { randomUUID } from "crypto";

const s3 = new S3Client({ region: process.env.AWS_REGION });
const BUCKET = process.env.UPLOAD_BUCKET!;

Pre-signed S3 upload from the browser

s3 security aws-sdk
by codesnips 3 tabs