Code Explainers

Code explainers tagged #requestanimationframe

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
javascript 
const progressBar = document.getElementById('reading-progress');
const article = document.querySelector('article');
 
function updateProgress() {

Building a scroll-driven reading progress bar

dom scroll-events throttling
Intermediate 9 steps
javascript 
class DOMBatcher {
  constructor() {
    this.reads = [];
    this.writes = [];

Batching DOM reads and writes to avoid layout thrash

batching requestanimationframe layout-thrashing
Intermediate 8 steps