Code Explainers

Code explainers tagged #state-management

typescript 
import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence
Intermediate 7 steps
typescript 
import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation
Intermediate 8 steps
typescript 
import { useCallback, useRef, useState } from "react";
 
type Tag = { id: string; label: string };
 

A debounced, abortable tag-input hook in React

custom-hooks debounce abort-controller
Advanced 10 steps
typescript 
type ToastVariant = "info" | "success" | "warning" | "error";
 
interface Toast {
  id: string;

A self-dismissing toast store with dedup

observer-pattern deduplication timers
Intermediate 10 steps
php 
final class FormEditorHistory
{
    private SplStack $undoStack;
    private SplStack $redoStack;

Undo/redo with two stacks in PHP

undo-redo stack state-management
Intermediate 9 steps
ruby 
class EditorHistory
  MAX_DEPTH = 100
 
  def initialize(initial = "")

How undo/redo history works in Ruby

undo-redo state-management immutability
Intermediate 9 steps
javascript 
class Carousel {
  constructor(root, { interval = 5000 } = {}) {
    this.root = root;
    this.track = root.querySelector('.carousel__track');

Building an accessible auto-playing carousel

dom state-management timers
Intermediate 9 steps
javascript 
import { createContext, useContext, useState, useCallback, useRef } from "react";
 
const ToastContext = createContext(null);
 

Building a toast notification system in React

context state-management hooks
Intermediate 7 steps
rust 
use std::sync::Arc;
 
use axum::{
    extract::{FromRef, State},

Substate extraction with FromRef in Axum

state-management routing middleware
Intermediate 8 steps
php 
<?php
 
namespace App\Services;
 

How user impersonation works in Laravel

authentication authorization session
Intermediate 8 steps
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