#refs code explainers

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

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

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

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

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, 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 { 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

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