Code Explainers

Code explainers tagged #custom-hooks

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
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 { 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
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 { 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
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, 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 { 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 { 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 { 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
javascript 
import { useState, useEffect } from "react";
 
export function useUser(userId) {
  const [user, setUser] = useState(null);

How a data-fetching hook works in React

custom-hooks data-fetching abortcontroller
Intermediate 8 steps
typescript 
import { useState, useEffect, useRef, useCallback } from "react";
 
interface SearchResult {
  id: string;

A debounced search hook in React

debounce custom-hooks abortcontroller
Intermediate 7 steps