Angular, React & TypeScript
Frontend bugs are often timing bugs: a check that did not run, an effect that ran twice, a response that arrived after the user moved on. These guides and Q&A threads explain the rendering models behind Angular and React precisely enough to reason about them, and show how to lean on the TypeScript compiler when refactoring a large codebase or typing generic code over discriminated unions.
3 guides · 4 Q&A threads
Guides
Angular OnPush Change Detection: What Triggers a Check, and Where Signals Fit
Angular keeps the DOM in sync with component state through change detection. With the Default strategy, every component in the tree is checked after any event Angular knows about: a click anywhere, a...
Refactoring a Large TypeScript Codebase with the Compiler as Your Safety Net
Renaming a field or reshaping a data structure in a large JavaScript codebase is risky because nothing tells you which code depends on the old shape until it fails at runtime. TypeScript changes that:...
Dynamic Components in Angular: NgComponentOutlet, createComponent and Lazy Loading
Some screens can't list their components in a template ahead of time: a dashboard where users pick widgets, a page built from a CMS or backend configuration, a plugin area. A long @switch over every p...
Q&A
TypeScript: Returning a Conditional Type from a Generic Function over a Discriminated Union (TS2322)
An event-processing service models its incoming events as a discriminated union on eventType. A generic enrichEvent function adds common metadata and applies type-specific changes to the payload. The...
React ResizeObserver Hook: Avoiding Observer Re-creation When a Callback Dependency Changes
A dashboard (React 18, TypeScript) has resizable chart panels. A custom hook, usePanelDimensions, uses ResizeObserver to track a panel's size and passes it to the chart inside. The hook also applies a...
React useEffect Data Fetching: Stale Responses and Updates After Unmount When Switching Tabs Quickly
A monitoring dashboard built with React and axios has several tabs. Each one renders a PerformanceMetric component that fetches time-series data (CPU, memory, network) for its metricId. Users switch t...
React Context API Performance Hit: Unrelated Consumers Re-rendering on Partial State Update
A common way to share user data in a React 18 + TypeScript dashboard is a single UserContext whose value holds the user's userName, theme preference and permissions. As the dashboard grows, the React...