Code Explainers
Code explainers tagged #state-management
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 } from 'react'; function StarRating({ value = 0, max = 5, onChange, size = 24 }) { const [hovered, setHovered] = useState(null);
Building an accessible star rating in React
controlled-component
accessibility
state-management
Intermediate
8 steps
typescript
import { Injectable, signal, computed, effect, inject } from '@angular/core'; import { DOCUMENT } from '@angular/common'; export type Theme = 'light' | 'dark';
A signal-based theme service in Angular
signals
reactivity
dependency-injection
Intermediate
7 steps
rust
use axum::{ extract::{FromRequestParts, Host}, http::{request::Parts, StatusCode}, };
Multi-tenant DB routing in Axum extractors
multi-tenancy
extractors
connection-pooling
Advanced
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
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 { Injectable, computed, effect, signal } from '@angular/core'; export interface CartLine { id: string;
A signal-based cart store in Angular
signals
reactivity
computed-state
Intermediate
8 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
javascript
class StarRating { constructor(container, { max = 5, value = 0, onChange } = {}) { this.container = container; this.max = max;
Building an accessible star-rating widget
dom
event-handling
accessibility
Intermediate
7 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
typescript
import { Injectable, signal, computed } from '@angular/core'; export type ToastKind = 'success' | 'error' | 'info' | 'warning';
Building a signal-based toast service in Angular
signals
state-management
dependency-injection
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 { 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
typescript
type CountdownState = { deadline: number; onTick: (remaining: number) => void; onComplete: () => void;
A countdown timer that survives reloads
persistence
timers
localstorage
Intermediate
10 steps
javascript
class HistoryStack { constructor(initial = '', limit = 100) { this.past = []; this.present = initial;
Building an undo/redo history stack
undo-redo
state-management
debouncing
Intermediate
7 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 } 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 } from "react"; const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
Building a validated signup form in React
form-validation
controlled-components
state-management
Intermediate
10 steps