javascript

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
// ES6 Class syntax
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

JavaScript classes and prototype-based inheritance

javascript classes oop
by Alex Chang 1 tab
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
javascript
import { Controller } from "@hotwired/stimulus"
import { DirectUpload } from "@rails/activestorage"

export default class extends Controller {
  static targets = ["input", "preview", "status"]
  static values = {

Stimulus controller for drag-and-drop file uploads

stimulus javascript file-uploads
by Jordan Lee 2 tabs
javascript
const jwt = require('jsonwebtoken');

const SECRET = process.env.JWT_SECRET;
const ALGORITHM = 'HS256';
const ACCESS_TTL = '15m';

JWT Authentication Middleware in Express That Populates req.user

express jwt authentication
by codesnips 3 tabs
javascript
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { fetchCurrentUser, postLogin, postLogout } from './api';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {

Protecting React Routes with an Auth Context and a RequireAuth Wrapper

react react-router authentication
by codesnips 4 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
javascript
// Sample data
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const users = [
  { id: 1, name: 'Alice', age: 25, active: true },
  { id: 2, name: 'Bob', age: 30, active: false },
  { id: 3, name: 'Charlie', age: 35, active: true },

Array methods: map, filter, reduce, and functional programming

javascript arrays functional-programming
by Alex Chang 1 tab
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
javascript
const express = require('express');
const { enqueueEmail } = require('./emailQueue');

const router = express.Router();

router.post('/users/:id/welcome-email', async (req, res, next) => {

Reliable Background Email Jobs With BullMQ, Redis, and a Worker Process

bullmq redis background-jobs
by codesnips 3 tabs
javascript
function parseRange(header, size) {
  if (!header || !header.startsWith('bytes=')) return null;

  const [rawStart, rawEnd] = header.replace('bytes=', '').split('-');
  let start;
  let end;

HTTP Range Requests for Video Streaming in Node.js With fs.createReadStream

nodejs http streaming
by codesnips 3 tabs
javascript
const express = require('express');
const controller = require('../controllers/userController');

const router = express.Router();

router.use((req, res, next) => {

Versioning an Express API with Router-per-Version Mounts and a Shared Controller Module

express api-versioning rest
by codesnips 4 tabs