React code explainers

javascript

import { useCallback, useRef, useState } from 'react';
 
export function ColorPicker({ initialColor = '#3b82f6', onCommit }) {
  const [committed, setCommitted] = useState(initialColor);

A validated color picker in React

uncontrolled-inputs refs validation

Intermediate 7 steps

javascript

import { useEffect, useRef } from 'react';
 
export function useRefetchOnFocus(refetch, { staleTime = 30_000 } = {}) {
  const lastFetchedAt = useRef(Date.now());

A React hook that refetches on tab focus

custom-hooks refs event-listeners

Intermediate 6 steps

javascript

import { useCallback, useEffect, useState } from 'react';
 
export function useLocalStorage(key, initialValue) {
  const readValue = useCallback(() => {

How a useLocalStorage hook syncs state in React

custom hooks localstorage state persistence

Intermediate 8 steps

javascript

import { useState } from 'react';
 
export function ReorderableList({ initialItems }) {
  const [items, setItems] = useState(initialItems);

Drag-to-reorder lists in React

drag-and-drop state-management immutable-updates

Intermediate 8 steps

javascript

import { Component } from 'react';
import { reportError } from './services/telemetry';
 
export class ErrorBoundary extends Component {

How a React ErrorBoundary works

error-handling lifecycle-methods render-props

Intermediate 8 steps

typescript

import { useCallback, useEffect, useRef, useState } from "react";
 
interface UseResendCooldownOptions {
  cooldownSeconds?: number;

A resend cooldown hook in React

custom-hooks timers state-management

Intermediate 7 steps

javascript

import { useReducer, useEffect } from "react";
 
const initialState = { status: "idle", data: null, error: null };

Building a data-fetching hook in React

custom-hooks usereducer data-fetching

Intermediate 9 steps

javascript

import { useState, useEffect, useCallback } from 'react';
 
function getColumnCount(width) {
  if (width < 640) return 1;

A responsive column hook in React

custom-hooks debouncing responsive-design

Intermediate 7 steps

javascript

import { useEffect, useState } from 'react';
 
export function useJobStatus(jobId, { interval = 3000 } = {}) {
  const [status, setStatus] = useState('pending');

Polling a job status with a React hook

custom-hooks polling cleanup

Intermediate 8 steps

javascript

function useHashState(key, defaultValue) {
  const parse = () => {
    const params = new URLSearchParams(window.location.hash.slice(1));
    return params.has(key) ? params.get(key) : defaultValue;

A React hook backed by the URL hash

custom-hooks url-state event-listeners

Intermediate 6 steps

javascript

import { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
 
export function RouteFocus({ title, children }) {

Managing focus on route change in React

accessibility focus-management routing

Intermediate 6 steps

javascript

import { useState, useRef, useCallback } from "react";
 
export function MultiSelect({ options, value, onChange, placeholder = "Select…" }) {
  const [open, setOpen] = useState(false);

Building a keyboard-accessible MultiSelect in React

controlled-component accessibility keyboard-navigation

Intermediate 10 steps

typescript

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

A cursor-based infinite scroll hook in React

custom-hooks pagination intersection-observer

Intermediate 9 steps

javascript

import { useState, useEffect, useCallback } from 'react';
 
export function useCountdown(initialSeconds) {
  const [secondsLeft, setSecondsLeft] = useState(initialSeconds);

Building a useCountdown hook in React

custom-hooks state-management side-effects

Intermediate 8 steps

javascript

import { useState, useRef } from "react";
 
export function TagInput({ initialTags = [], onChange }) {
  const [tags, setTags] = useState(initialTags);

Building a tag input in React

controlled-inputs state-management keyboard-handling

Intermediate 8 steps

javascript

import { NavLink, useLocation } from 'react-router-dom';
 
const NAV_ITEMS = [
  { to: '/', label: 'Dashboard', end: true },

Building an accessible Sidebar in React

routing accessibility declarative-ui

Intermediate 6 steps

javascript

import { useEffect, useRef } from "react";
import { useBlocker } from "react-router-dom";
 
export function useUnsavedChangesPrompt(isDirty, message = "You have unsaved changes. Leave anyway?") {

Guarding unsaved changes with a React hook

custom-hooks navigation-guard event-listeners

Intermediate 7 steps

javascript

import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
const TextField = forwardRef(function TextField(
  { label, error, onChange, ...props },

Exposing an imperative handle in React

forwardref useimperativehandle refs

Advanced 8 steps