react

typescript
import { useState, useEffect } from 'react'

export function useDebounce<T>(value: T, delay: number = 500): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  useEffect(() => {

Custom hooks for reusable logic

react hooks typescript
by Maya Patel 3 tabs
typescript
import { createConsumer, Cable } from '@rails/actioncable'

let cable: Cable | null = null

export function getCable(): Cable {
  if (!cable) {

WebSocket integration with Action Cable

react actioncable websockets
by Maya Patel 3 tabs
typescript
import { useState, useMemo, useCallback } from 'react'
import { Post } from '@/types'
import { PostCard } from './PostCard'

interface FilteredPostsProps {
  posts: Post[]

Memoization in React with useMemo and useCallback

react performance memoization
by Maya Patel 1 tab
typescript
import { useEffect, useState, useRef } from 'react'

interface UseInViewOptions {
  threshold?: number | number[]
  rootMargin?: string
  triggerOnce?: boolean

Intersection Observer API for visibility tracking

react performance intersection-observer
by Maya Patel 2 tabs
typescript
import { useReducer } from 'react'

interface FormState {
  values: Record<string, any>
  errors: Record<string, string>
  touched: Record<string, boolean>

React useReducer for complex state logic

react hooks state-management
by Maya Patel 1 tab
typescript
import { useState, useRef } from 'react'
import { DirectUpload } from '@rails/activestorage'

interface ImageUploadProps {
  onUploadComplete: (blobId: string) => void
  maxSize?: number

Image upload with preview and Rails Direct Upload

react rails activestorage
by Maya Patel 1 tab
typescript
export type EventMap = Record<string, unknown[]>;

type Listener<Args extends unknown[]> = (...args: Args) => void;

export class TypedEmitter<Events extends EventMap> {
  private listeners = new Map<keyof Events, Set<Listener<any>>>();

Type-Safe Event Emitter With Strongly-Typed Listener Payloads in TypeScript

typescript events event-emitter
by codesnips 3 tabs
typescript
import { useCallback, useEffect, useRef, useState } from 'react';

export type CopyStatus = 'idle' | 'copied' | 'error';

function fallbackCopy(text: string): boolean {
  const textarea = document.createElement('textarea');

Frontend: copy-to-clipboard with fallback

frontend ux react
by codesnips 3 tabs
typescript
import { Response } from 'express';

type Client = { id: number; res: Response };

const clients = new Map<string, Set<Client>>();
let nextId = 1;

SSE endpoint for server-to-browser events

realtime sse express
by codesnips 3 tabs
vue
<template>
  <form @submit.prevent="form.post(route('posts.store'))">
    <div>
      <label>Title</label>
      <input v-model="form.title" type="text" />
      <div v-if="form.errors.title">{{ form.errors.title }}</div>

Laravel Inertia.js for modern SPAs

laravel inertia spa
by Carlos Mendez 3 tabs
typescript
import { lazy, Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from '@/components/Layout'

// Eager load critical routes
import Home from '@/pages/Home'

Lazy loading routes with React.lazy and Suspense

react performance code-splitting
by Maya Patel 1 tab
typescript
import * as Sentry from "@sentry/react";

const environment = import.meta.env.VITE_ENVIRONMENT ?? "development";
const isProd = environment === "production";

export function initSentry(): void {

Sentry initialization with release + environment

observability frontend sentry
by codesnips 3 tabs