React code explainers

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);

Delaying a loading spinner with a React hook

custom-hooks debouncing cleanup

Intermediate 8 steps

typescript

import { useCallback, useRef, useState } from "react";
 
type Tag = { id: string; label: string };

A debounced, abortable tag-input hook in React

custom-hooks debounce abort-controller

Advanced 10 steps

typescript

import { useCallback, useId, useRef, useState, type KeyboardEvent } from 'react';
 
interface Tab {
  id: string;

Building an accessible tabs component in React

accessibility aria keyboard-navigation

Intermediate 8 steps

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

javascript

import { useState } from 'react';
 
function TreeNode({ node, depth = 0 }) {
  const [expanded, setExpanded] = useState(depth === 0);

How a recursive file tree renders in React

recursion component-composition local-state

Intermediate 8 steps

javascript

import { useState, useEffect, useRef } from 'react';
 
export function SectionSearch({ sections }) {
  const [query, setQuery] = useState(() => decodeURIComponent(window.location.hash.slice(1)));

Syncing search state with the URL hash in React

debouncing url-state useeffect

Intermediate 7 steps

javascript

import { createContext, useContext, useState, useCallback, useRef } from "react";
 
const ToastContext = createContext(null);

Building a toast notification system in React

context state-management hooks

Intermediate 7 steps

javascript

import { useState, useEffect, useRef, useCallback } from 'react';
 
export default function Carousel({ images }) {
  const [index, setIndex] = useState(0);

Building a wrap-around Carousel in React

hooks usecallback event-listeners

Intermediate 9 steps

javascript

import { useEffect, useRef } from 'react';
 
export function useOnClickOutside(handler) {
  const ref = useRef(null);

A click-outside hook in React

custom-hooks refs event-listeners

Intermediate 7 steps

javascript

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

Building an auth context in React

context usereducer authentication

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

typescript

import { useCallback, useRef, useState } from "react";
 
type UploadZoneProps = {
  accept?: string[];

A drag-and-drop file upload zone in React

drag-and-drop file-validation controlled-state

Intermediate 9 steps

javascript

import { useCallback, useState } from "react";
 
const MIN = 0;
const MAX = 1000;

Building a dual-thumb price slider in React

controlled-components state-clamping usecallback

Intermediate 8 steps

typescript

import { useState, useEffect, useRef, useCallback } from "react";
 
interface Suggestion {
  id: string;

A debounced autocomplete hook in React

debounce custom-hooks abortcontroller

Advanced 7 steps

javascript

import { useReducer, useCallback } from 'react';
 
function historyReducer(state, action) {
  const { past, present, future } = state;

Undo/redo form state with a React reducer

undo-redo reducer immutability

Intermediate 10 steps

javascript

import { useState } from 'react';
 
function StarRating({ value = 0, max = 5, onChange, size = 24 }) {
  const [hovered, setHovered] = useState(null);

Building an accessible star rating in React

controlled-component accessibility state-management

Intermediate 8 steps