JS frameworks, React/Vue/Svelte, and runtime updates Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 25-2026bolt1 CRITICAL
article
Node.js June 2026 Security Releases
TAG: SECURITY
The Node.js project released security updates for the 22.x, 24.x, and 26.x release lines on June 18, 2026, patching eleven CVEs. The two highest-severity issues are CVE-2026-48933, a WebCrypto AES integer overflow that crashes the process when input is a multiple of 2 GiB, and CVE-2026-48618, a TLS wildcard-depth authentication bypass caused by hostname normalization mismatches between the resolver and verifier. Medium-severity fixes cover proxy-credential leakage in ERR_PROXY_TUNNEL error messages, HTTP/2 unbounded memory growth via attacker-controlled ORIGIN frames, a GOAWAY session cleanup bug, and an mTLS hostname case-sensitivity bypass. Dependency updates include llhttp 9.4.2, nghttp2 1.69.0, OpenSSL 3.5.7, and line-specific undici upgrades. All supported active LTS lines are affected; upgrading immediately is strongly recommended.
Angular 22's Biggest Shift: OnPush Is Now the Default Change Detection Strategy
TAG: ANGULAR
Angular 22, released June 3, 2026, makes ChangeDetectionStrategy.OnPush the default for any component that does not set an explicit strategy, completing the signals-based reactivity model introduced over several prior releases. The old Default strategy is renamed ChangeDetectionStrategy.Eager — a name that describes the behavior rather than a list position. Running ng update automatically tags every existing component as Eager to preserve pre-upgrade behavior, but compiled third-party library code in node_modules is not rewritten; a library component that writes to a plain field inside an RxJS subscription will silently stop refreshing its template binding after the upgrade. The recommended fix is bridging observables to signals via toSignal(). The release also stabilizes the Resource API (resource, rxResource, httpResource), introduces an experimental debounced() helper, bumps the toolchain floor to TypeScript 6 and Node 22+, defaults strictTemplates to true, and switches HttpClient to the Fetch backend.
How to Avoid Overusing useCallback and useMemo in React
TAG: REACT
Memoization with useCallback and useMemo is often applied reflexively in React codebases, but each call allocates memory for a cached value and a dependency array, adding overhead that frequently exceeds the benefit for cheap operations like creating a function or sorting 50 items. This in-depth guide walks through a Next.js search page where a monolithic SearchPage component owns all state, fetching, and callbacks, then refactors it by moving logic down to the components that actually need it — ProductTable takes over its own useQuery and local sort state, a unified Filter component manages drawer, countries/colors/modes fetching, and activeFilterCount, Search internalizes debounce refs, and FilterChips computes its own priceLabel. The result eliminates the need for most memoization without sacrificing correctness. The article also covers fixing infinite-render loops caused by unstable object references with primitives in dependency arrays, defining objects outside components, or using useState rather than reaching for useMemo.
Storybook for TanStack React: First-Class Support for Router, Start, and Query
TAG: TOOLING
Storybook has shipped @storybook/tanstack-react, a dedicated framework package built with the TanStack core team that provides zero-config integration for TanStack Router, Start, and Query. Every story is automatically wrapped in a RouterProvider using in-memory history, and route parameters and search params are type-checked against the route's declared schema at compile time. TanStack Start server functions created with createServerFn() are automatically stubbed into plain mock functions, letting each story configure success, loading, empty, and error states without spinning up a real server, database, or auth layer. A shared QueryClient decorator pattern enables per-story cache seeding. Server-only imports from @tanstack/react-start are redirected to browser-safe mocks via Vite plugins at build time. The framework requires React 18 or later and Vite 7 or later, and can be added to an existing @storybook/react-vite project via the automigrate CLI command.
Wasp Now Lets You Write Full-Stack Logic as a TypeScript Spec
TAG: FRAMEWORK
Wasp, the batteries-included full-stack JS/TS framework, has replaced its custom DSL compiler with a TypeScript-native specification layer. Developers write *.wasp.ts files using spec constructors imported from @wasp.sh/spec — including page, route, query, action, and job — composing them into a single exported app object. A novel with { type: ref } import attribute lets the spec reference React and Node.js implementation files without evaluating them at spec-build time, keeping the full-stack contract decoupled from the underlying stack. Because the spec is plain TypeScript, it supports for-loops, third-party libraries, disk reads, and feature-vertical organization across multiple files. The post demonstrates a custom file-based routing implementation built entirely in spec code, and previews upcoming Full Stack Modules (FSMs) — distributable, interface-defined full-stack vertical slices. Migration from the old DSL is described with a quick-start CLI guide.
How to Master React 19 useActionState for Async Forms
TAG: REACT
React 19's useActionState hook consolidates the repetitive boilerplate of async form handling — loading flags, error state, success state, and try/catch blocks — into a single three-value API: state, a submitAction function, and an isPending boolean. The action function receives previousState and a FormData object, returning the next state, so React coordinates the full async transition. The guide shows how useActionState pairs directly with Server Actions (declared with 'use server') for a clean full-stack workflow with no custom API route or manual fetch call. It compares useActionState to useReducer, noting useReducer suits synchronous, finite-state logic while useActionState targets I/O-bound async workflows. Combining useActionState with useOptimistic enables instant UI updates before server confirmation. Because actions execute through React's transition system, UI remains interactive and updates are interruptible during long-running operations.
Jack Herrington demos the latest WebMCP improvements and explains why the standard still falls short of its full potential. New Chrome DevTools support — enabled via twochrome://flags entries — adds a WebMCP panel under the Application tab, listing all registered tools for the active page and allowing individual tool invocation with visible input/output. A newly introduced declarative API removes the need for any JavaScript: adding toolname, tooldescription, and toolparamdescription HTML attributes to form elements auto-registers those elements as MCP tools, demonstrated live on an in-memory to-do list. Both the imperative API (document.modelContext.registerTool) and the declarative approach are compared. Herrington argues the standard is only half complete because browser AI panels — including Chrome's own Gemini integration — do not yet consume the model context object, leaving the browser-side MCP infrastructure without an AI client to drive it.
The Node.js project released security updates for the 22.x, 24.x, and 26.x release lines on June 18, 2026, patching eleven CVEs. The two highest-severity issues are CVE-2026-48933, a WebCrypto AES integer overflow that crashes the process when input is a multiple of 2 GiB, and CVE-2026-48618, a TLS wildcard-depth authentication bypass caused by hostname normalization mismatches between the resolver and verifier. Medium-severity fixes cover proxy-credential leakage in ERR_PROXY_TUNNEL error messages, HTTP/2 unbounded memory growth via attacker-controlled ORIGIN frames, a GOAWAY session cleanup bug, and an mTLS hostname case-sensitivity bypass. Dependency updates include llhttp 9.4.2, nghttp2 1.69.0, OpenSSL 3.5.7, and line-specific undici upgrades. All supported active LTS lines are affected; upgrading immediately is strongly recommended.
Jack Herrington demos the latest WebMCP improvements and explains why the standard still falls short of its full potential. New Chrome DevTools support — enabled via twochrome://flags entries — adds a WebMCP panel under the Application tab, listing all registered tools for the active page and allowing individual tool invocation with visible input/output. A newly introduced declarative API removes the need for any JavaScript: adding toolname, tooldescription, and toolparamdescription HTML attributes to form elements auto-registers those elements as MCP tools, demonstrated live on an in-memory to-do list. Both the imperative API (document.modelContext.registerTool) and the declarative approach are compared. Herrington argues the standard is only half complete because browser AI panels — including Chrome's own Gemini integration — do not yet consume the model context object, leaving the browser-side MCP infrastructure without an AI client to drive it.
Angular 22's Biggest Shift: OnPush Is Now the Default Change Detection Strategy
Angular 22, released June 3, 2026, makes ChangeDetectionStrategy.OnPush the default for any component that does not set an explicit strategy, completing the signals-based reactivity model introduced over several prior releases. The old Default strategy is renamed ChangeDetectionStrategy.Eager — a name that describes the behavior rather than a list position. Running ng update automatically tags every existing component as Eager to preserve pre-upgrade behavior, but compiled third-party library code in node_modules is not rewritten; a library component that writes to a plain field inside an RxJS subscription will silently stop refreshing its template binding after the upgrade. The recommended fix is bridging observables to signals via toSignal(). The release also stabilizes the Resource API (resource, rxResource, httpResource), introduces an experimental debounced() helper, bumps the toolchain floor to TypeScript 6 and Node 22+, defaults strictTemplates to true, and switches HttpClient to the Fetch backend.
How to Avoid Overusing useCallback and useMemo in React
Memoization with useCallback and useMemo is often applied reflexively in React codebases, but each call allocates memory for a cached value and a dependency array, adding overhead that frequently exceeds the benefit for cheap operations like creating a function or sorting 50 items. This in-depth guide walks through a Next.js search page where a monolithic SearchPage component owns all state, fetching, and callbacks, then refactors it by moving logic down to the components that actually need it — ProductTable takes over its own useQuery and local sort state, a unified Filter component manages drawer, countries/colors/modes fetching, and activeFilterCount, Search internalizes debounce refs, and FilterChips computes its own priceLabel. The result eliminates the need for most memoization without sacrificing correctness. The article also covers fixing infinite-render loops caused by unstable object references with primitives in dependency arrays, defining objects outside components, or using useState rather than reaching for useMemo.
Storybook for TanStack React: First-Class Support for Router, Start, and Query
Storybook has shipped @storybook/tanstack-react, a dedicated framework package built with the TanStack core team that provides zero-config integration for TanStack Router, Start, and Query. Every story is automatically wrapped in a RouterProvider using in-memory history, and route parameters and search params are type-checked against the route's declared schema at compile time. TanStack Start server functions created with createServerFn() are automatically stubbed into plain mock functions, letting each story configure success, loading, empty, and error states without spinning up a real server, database, or auth layer. A shared QueryClient decorator pattern enables per-story cache seeding. Server-only imports from @tanstack/react-start are redirected to browser-safe mocks via Vite plugins at build time. The framework requires React 18 or later and Vite 7 or later, and can be added to an existing @storybook/react-vite project via the automigrate CLI command.
Wasp Now Lets You Write Full-Stack Logic as a TypeScript Spec
Wasp, the batteries-included full-stack JS/TS framework, has replaced its custom DSL compiler with a TypeScript-native specification layer. Developers write *.wasp.ts files using spec constructors imported from @wasp.sh/spec — including page, route, query, action, and job — composing them into a single exported app object. A novel with { type: ref } import attribute lets the spec reference React and Node.js implementation files without evaluating them at spec-build time, keeping the full-stack contract decoupled from the underlying stack. Because the spec is plain TypeScript, it supports for-loops, third-party libraries, disk reads, and feature-vertical organization across multiple files. The post demonstrates a custom file-based routing implementation built entirely in spec code, and previews upcoming Full Stack Modules (FSMs) — distributable, interface-defined full-stack vertical slices. Migration from the old DSL is described with a quick-start CLI guide.
How to Master React 19 useActionState for Async Forms
React 19's useActionState hook consolidates the repetitive boilerplate of async form handling — loading flags, error state, success state, and try/catch blocks — into a single three-value API: state, a submitAction function, and an isPending boolean. The action function receives previousState and a FormData object, returning the next state, so React coordinates the full async transition. The guide shows how useActionState pairs directly with Server Actions (declared with 'use server') for a clean full-stack workflow with no custom API route or manual fetch call. It compares useActionState to useReducer, noting useReducer suits synchronous, finite-state logic while useActionState targets I/O-bound async workflows. Combining useActionState with useOptimistic enables instant UI updates before server confirmation. Because actions execute through React's transition system, UI remains interactive and updates are interruptible during long-running operations.
Security dominated JavaScript news in week 25, with Node.js shipping emergency patches across all active LTS lines (22.x, 24.x, 26.x) to address eleven CVEs. The two critical issues — CVE-2026-48933 (WebCrypto AES integer overflow) and CVE-2026-48618 (TLS wildcard-depth authentication bypass) — alongside medium-severity fixes for HTTP/2 memory growth and proxy-credential leakage in ERR_PROXY_TUNNEL messages underscore that runtime-level security hygiene remains non-negotiable. Dependency updates include OpenSSL 3.5.7, llhttp 9.4.2, and nghttp2 1.69.0.
On the framework side, Angular 22 completed its signals-based reactivity pivot by making ChangeDetectionStrategy.OnPush the default for all components without an explicit strategy; the old Default strategy is now renamed Eager. The ng update migration path preserves existing behavior, but compiled third-party libraries that write to plain fields inside RxJS subscriptions will silently stop refreshing unless bridged to signals via toSignal(). Meanwhile, Wasp replaced its custom DSL compiler with a TypeScript-native spec layer using *.wasp.ts files and @wasp.sh/spec constructors, enabling for-loops, third-party imports, and a novel with { type: ref } import attribute for decoupled full-stack contracts.
React tooling saw two notable additions: Storybook shipped @storybook/tanstack-react with zero-config integration for TanStack Router, Start, and Query — automatically stubbing createServerFn() server functions per story — while a detailed guide on React 19's useActionState showed how the hook consolidates async form boilerplate into a three-value API that coordinates directly with Server Actions. The WebMCP standard received a candid assessment: Chrome DevTools now supports a WebMCP panel and a declarative HTML-attribute API, but browser AI panels do not yet consume the model context object, leaving the standard only halfway functional.
Key Takeaways
Upgrade Node.js immediately: CVE-2026-48933 (WebCrypto AES overflow) and CVE-2026-48618 (TLS wildcard bypass) affect all active LTS lines and OpenSSL is now 3.5.7.
Angular 22's OnPush-by-default change will silently break compiled third-party library components that mutate plain fields inside RxJS subscriptions — bridge with toSignal() before upgrading.
Storybook's @storybook/tanstack-react auto-stubs TanStack Start server functions per story, eliminating the need for a real server, database, or auth layer in component tests.
