Javascript code explainers

javascript

import { useEffect, useRef } from "react";
import { useBlocker } from "react-router-dom";
 
export function useUnsavedChangesPrompt(isDirty, message = "You have unsaved changes. Leave anyway?") {

Guarding unsaved changes with a React hook

custom-hooks navigation-guard event-listeners

Intermediate 7 steps

javascript

function deepFreeze(obj) {
  const propNames = Reflect.ownKeys(obj);
 
  for (const name of propNames) {

Recursively freezing a nested object

recursion immutability object-freezing

Intermediate 6 steps

javascript

class InfiniteScroll {
  constructor(sentinel, { loadMore, root = null, rootMargin = '200px' } = {}) {
    this.sentinel = sentinel;
    this.loadMore = loadMore;

Infinite scroll with IntersectionObserver

intersectionobserver pagination async

Intermediate 10 steps

javascript

import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
const TextField = forwardRef(function TextField(
  { label, error, onChange, ...props },

Exposing an imperative handle in React

forwardref useimperativehandle refs

Advanced 8 steps

javascript

import { NextResponse } from 'next/server';
import { createWriteStream } from 'node:fs';
import { mkdir } from 'node:fs/promises';
import { pipeline } from 'node:stream/promises';

Streaming file uploads in a Next.js route

file-upload streams validation

Intermediate 9 steps

javascript

const crypto = require('crypto');
 
function inMemoryCache({ maxAge = 60_000, maxEntries = 500 } = {}) {
  const store = new Map();

Building an in-memory cache middleware in Express

caching middleware etag

Advanced 10 steps

javascript

import { createContext, useContext, useState, useId } from "react";
 
const AccordionContext = createContext(null);
const ItemContext = createContext(null);

Building a compound Accordion in React

context compound-components state-management

Intermediate 8 steps

javascript

const express = require('express');
const router = express.Router();
const { pool } = require('../db');
const redis = require('../redis');

Building a health check endpoint in Express

health-check timeouts promise-race

Intermediate 9 steps

javascript

'use client';
 
import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

How a Next.js error boundary recovers

error-boundary error-handling observability

Intermediate 8 steps

javascript

const MAX_BATCH_SIZE = 20;
const FLUSH_INTERVAL = 5000;
const ENDPOINT = '/api/analytics';

Batching analytics events in the browser

batching buffering sendbeacon

Intermediate 10 steps

javascript

export function diffIds(current, desired) {
  const currentSet = new Set(current);
  const desiredSet = new Set(desired);

Diffing sets to sync group membership

set-operations diffing transactions

Intermediate 8 steps

javascript

class HistoryStack {
  constructor(initial = '', limit = 100) {
    this.past = [];
    this.present = initial;

Building an undo/redo history stack

undo-redo state-management debouncing

Intermediate 7 steps

javascript

import { useState, useCallback, useRef } from 'react';
 
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked);

Optimistic like button with React

optimistic-ui abortcontroller error-handling

Advanced 7 steps

javascript

import { useState, useRef, useEffect, useCallback } from 'react';
 
export function CopyButton({ text, label = 'Copy' }) {
  const [copied, setCopied] = useState(false);

A copy-to-clipboard button in React

clipboard-api hooks cleanup

Intermediate 7 steps

javascript

const UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
 
export function formatBytes(bytes, { decimals = 1, binary = false } = {}) {
  if (!Number.isFinite(bytes)) {

Formatting byte counts into human units

logarithms formatting default-parameters

Intermediate 8 steps

javascript

'use client';
 
import { useState, useTransition, useRef, useEffect, useCallback } from 'react';
import { loadMorePosts } from '@/app/actions/posts';

Infinite scroll with Server Actions in Next.js

infinite-scroll intersection-observer server-actions

Intermediate 8 steps

javascript

import { createContext, useContext, useEffect, useState, useCallback } from 'react';
 
const ThemeContext = createContext(null);

Building a theme provider with React Context

context hooks dark-mode

Intermediate 9 steps

javascript

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);

Building a curry function in JavaScript

currying closures higher-order-functions

Intermediate 7 steps