Code Explainers

Code explainers tagged #state-management

typescript 
type EditorState = {
  content: string;
  cursor: number;
};

Undo/redo with two stacks in TypeScript

undo-redo stacks state-management
Intermediate 7 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
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
typescript 
import { Injectable, computed, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';
 

Optimistic updates with Angular signals

signals optimistic-updates state-management
Intermediate 9 steps
ruby 
class Subscription < ApplicationRecord
  belongs_to :account
 
  enum :status, {

Modeling subscription lifecycle in Rails

enums scopes state-management
Intermediate 8 steps
typescript 
import { Component, computed, inject, signal } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';
 

Building a signup stepper in Angular

signals reactive-forms form-validation
Intermediate 10 steps