#custom-hook code explainers

javascript

import { useReducer, useCallback } from 'react';
 
function historyReducer(state, action) {
  const { past, present, future } = state;

Undo/redo form state with a React reducer

undo-redo reducer immutability

Intermediate 10 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 { createContext, useContext, useReducer } from "react";
 
const WizardContext = createContext(null);

Building a form wizard with Context in React

context reducer state-management

Intermediate 10 steps