React code explainers

javascript

import { useState, useRef, useCallback, useLayoutEffect } from "react";
 
export function useResizeObserver({ debounce = 0 } = {}) {
  const [size, setSize] = useState({ width: 0, height: 0 });

A resize-observing hook in React

custom-hook resizeobserver callback-ref

Advanced 8 steps

javascript

import { useState } from "react";
 
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

Building a validated signup form in React

form-validation controlled-components state-management

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

typescript

import { useEffect, useRef, useState } from "react";
 
export function useClickOutside<T extends HTMLElement>() {
  const ref = useRef<T>(null);

A dismiss-on-outside-click hook in React

custom-hooks event-listeners cleanup

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

import { useState, useEffect, useRef, useCallback } from "react";
 
function useDebouncedValue(value, delay) {
  const [debounced, setDebounced] = useState(value);

Debounced autosave in React

debouncing custom-hooks abort-controller

Intermediate 8 steps

javascript

import { lazy, Suspense } from "react";
import { Routes, Route, NavLink } from "react-router-dom";
import ErrorBoundary from "./components/ErrorBoundary";
import Spinner from "./components/Spinner";

Lazy-loaded routes in React

code-splitting lazy-loading routing

Intermediate 6 steps

javascript

import { createContext, useContext, useReducer } from "react";
 
const WizardContext = createContext(null);

Building a form wizard with Context in React

context reducer state-management

Intermediate 10 steps

javascript

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

Building a shopping cart with Context in React

state management reducer context

Intermediate 10 steps

javascript

import { useState, useCallback, useEffect } from 'react';
 
function usePaginatedProducts(pageSize = 20) {
  const [items, setItems] = useState([]);

Cursor-based infinite scroll with a React hook

custom-hooks pagination async-fetching

Intermediate 8 steps

javascript

import { useCallback, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
 
const FOCUSABLE = 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';

Building an accessible modal in React

focus-trap accessibility portals

Advanced 9 steps

typescript

import { useEffect, useRef, useCallback } from "react";
 
type DraftPayload = Record<string, unknown>;

A debounced auto-save hook in React

debouncing request-cancellation refs

Advanced 7 steps

javascript

import { useSearchParams } from "react-router-dom";
 
const TABS = [
  { id: "overview", label: "Overview" },

URL-driven tabs with React Router

url-state query-params accessibility

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

import { useEffect, useRef, useState } from "react";
 
export function Dropdown({ label, children }) {
  const [open, setOpen] = useState(false);

Closing a dropdown on outside click in React

outside-click event-listeners cleanup

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback, useRef } from "react";
 
export function usePersistentForm(storageKey, initialValues) {
  const [values, setValues] = useState(() => {

A React hook that persists form state to localStorage

custom-hooks localstorage debounce

Intermediate 9 steps

javascript

import { useCallback, useEffect, useRef, useState } from 'react';
 
export function useInfiniteScroll(fetchPage) {
  const [items, setItems] = useState([]);

Building an infinite scroll hook in React

custom-hooks intersection-observer pagination

Advanced 6 steps

javascript

import { useState, useEffect, useMemo } from 'react';
 
function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

Debounced search with cancellation in React

custom-hooks debounce abortcontroller

Intermediate 9 steps