Code Explainers

Code explainers tagged #memoization

typescript 
import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'chunk',

A memoized chunk pipe in Angular

memoization weakmap pure-pipes
Intermediate 7 steps
javascript 
class Sheet {
  constructor() {
    this.cells = new Map();
    this.computing = new Set();

Building a reactive spreadsheet engine

reactivity dependency-tracking graph-traversal
Advanced 9 steps
php 
<?php
 
namespace App\Services;
 

A cached settings service in Laravel

caching memoization cache-invalidation
Intermediate 8 steps
typescript 
type CacheEntry<V> = {
  value: V;
  computedAt: number;
};

A TTL cache keyed by object identity

caching weakmap generics
Intermediate 8 steps
ruby 
module MarkdownHelper
  ALLOWED_TAGS = %w[
    p br strong em del a ul ol li blockquote code pre
    h1 h2 h3 h4 h5 h6 hr img table thead tbody tr th td

Safely rendering Markdown in a Rails helper

sanitization markdown security
Intermediate 8 steps
typescript 
type CompactOptions = {
  locale?: string;
  maximumFractionDigits?: number;
};

Caching Intl.NumberFormat for compact numbers

memoization internationalization caching
Intermediate 7 steps
java 
@Service
@RequiredArgsConstructor
public class ExchangeRateService {
 

Request-scoped rate caching in Spring

request-scope caching memoization
Advanced 6 steps
javascript 
import { useDeferredValue, useMemo, useState } from "react";
 
function ProductSearch({ products }) {
  const [query, setQuery] = useState("");

Keeping search input snappy with useDeferredValue in React

concurrent-rendering deferred-value memoization
Intermediate 7 steps
javascript 
import { useCallback, useRef, useState } from 'react';
 
export function ColorPicker({ initialColor = '#3b82f6', onCommit }) {
  const [committed, setCommitted] = useState(initialColor);

A validated color picker in React

uncontrolled-inputs refs validation
Intermediate 7 steps
python 
from functools import lru_cache
 
 
class SpellingSuggester:

A spelling suggester with edit distance

edit-distance dynamic-programming memoization
Intermediate 9 steps
typescript 
import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
 
interface MoneyOptions {
  currency?: string;

Building a cached money pipe in Angular

pipes memoization internationalization
Intermediate 8 steps
ruby 
require "phonelib"
 
class PhoneNumber
  class InvalidNumber < StandardError; end

Wrapping phone parsing in a Ruby value object

value-object memoization validation
Intermediate 7 steps
typescript 
type CurrencyFormatOptions = {
  locale?: string;
  currency: string;
  showDecimals?: boolean;

Caching Intl.NumberFormat for currency

memoization internationalization caching
Intermediate 9 steps
javascript 
import { useRef, useState, useCallback, useMemo } from 'react';
 
export function VirtualList({ items, rowHeight = 40, height = 600, overscan = 5, renderRow }) {
  const [scrollTop, setScrollTop] = useState(0);

How a virtualized list works in React

virtualization performance memoization
Intermediate 8 steps
javascript 
import { useState, useCallback, memo } from 'react';
 
const TodoItem = memo(function TodoItem({ todo, onToggle, onRemove }) {
  return (

Preventing re-renders in a React todo list

memoization usecallback referential-stability
Intermediate 8 steps
javascript 
function memoize(fn, resolver) {
  const cache = new Map();
 
  function memoized(...args) {

Building a memoize wrapper in JavaScript

memoization closures higher-order-functions
Intermediate 7 steps
javascript 
const formatters = new Map();
 
function getFormatter(locale, currency) {
  const key = `${locale}:${currency}`;

Caching Intl.NumberFormat for currency formatting

memoization internationalization caching
Intermediate 8 steps
typescript 
type AsyncFn<A extends unknown[], R> = (...args: A) => Promise<R>;
 
interface MemoizeOptions<A extends unknown[]> {
  keyFn?: (...args: A) => string;

Memoizing async functions with TTL in TypeScript

memoization generics promises
Advanced 8 steps