#performance code explainers

typescript

import { useCallback, useRef, useState } from "react";
 
interface VirtualListProps<T> {
  items: T[];

How a virtualized list renders in React

virtualization windowing performance

Advanced 7 steps

typescript

import { Directive, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
 
interface Point {
  x: number;

Throttling pointer events with NgZone in Angular

change-detection requestanimationframe event-throttling

Advanced 8 steps

typescript

import {
  Directive,
  ElementRef,
  EventEmitter,

An infinite-scroll directive in Angular

intersectionobserver directives performance

Advanced 7 steps

typescript

import { Directive, ElementRef, EventEmitter, inject, NgZone, OnDestroy, Output } from '@angular/core';
 
@Directive({
  selector: '[appResizeDebounced]',

A debounced resize directive in Angular

debounce change-detection host-bindings

Advanced 7 steps

ruby

module SlowQueryLogger
  SLOW_QUERY_THRESHOLD_MS = 200.0
  IGNORED_PAYLOAD_NAMES = %w[SCHEMA TRANSACTION].freeze

Logging slow SQL queries in Rails

instrumentation logging pub-sub

Intermediate 7 steps

typescript

type LazyImageOptions = {
  rootMargin?: string;
  loadedClass?: string;
};

Lazy-loading images with IntersectionObserver

intersectionobserver lazy-loading performance

Intermediate 7 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

const express = require('express');
const compression = require('compression');
const zlib = require('zlib');

Tuning Express response compression

compression middleware http

Intermediate 9 steps

javascript

import { useRef, useCallback, useEffect, useState } from "react";
 
function useThrottle(callback, delay) {
  const lastRun = useRef(0);

Building a throttle hook in React

throttling custom-hooks refs

Intermediate 8 steps

javascript

function initLazyLoad(root = document) {
  const images = root.querySelectorAll('img[data-src]');
 
  if (!('IntersectionObserver' in window)) {

How lazy image loading works

lazy-loading intersectionobserver progressive-enhancement

Intermediate 8 steps