React code explainers

typescript

import { useState, useCallback } from 'react';
 
type Todo = {
  id: string;

Optimistic UI updates in a React hook

optimistic-updates custom-hooks error-handling

Intermediate 8 steps

javascript

import { createContext, useContext, useState, useId } from "react";
 
const AccordionContext = createContext(null);
const ItemContext = createContext(null);

Building a compound Accordion in React

context compound-components state-management

Intermediate 8 steps

javascript

import { useState, useCallback, useRef } from 'react';
 
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked);

Optimistic like button with React

optimistic-ui abortcontroller error-handling

Advanced 7 steps

javascript

import { useState, useRef, useEffect, useCallback } from 'react';
 
export function CopyButton({ text, label = 'Copy' }) {
  const [copied, setCopied] = useState(false);

A copy-to-clipboard button in React

clipboard-api hooks cleanup

Intermediate 7 steps

javascript

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

Building a theme provider with React Context

context hooks dark-mode

Intermediate 9 steps

javascript

import { useState } from 'react';
 
const steps = ['account', 'profile', 'review'];

Building a multi-step form wizard hook in React

custom-hooks form-validation state-management

Intermediate 9 steps

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