Browser runtime, resource ownership and native capabilities

Learning outcome

Investigate a slow, memory-growing screen through task timing and ownership. Choose native platform behavior deliberately, including forms, dialogs, URLs, streams, storage and workers.

Mental model and constraints

A render is not a paint. JavaScript, style recalculation, layout and compositing compete for a frame; network completion does not guarantee a responsive interaction. A transition may defer a React update but cannot make an expensive synchronous function cheaper. Begin with a trace of the actual interaction, including its event handler and presentation delay.

Every long-lived resource needs an owner and a release event. A stream reader belongs to a subscription, not to a component module. A database connection belongs to a runtime or request scope. An event listener belongs to the element or effect that installed it. Cross-tab state needs an explicit protocol, not an assumption that two calls to a hook share memory.

Worked implementation

responseChunks owns a ReadableStream reader, installs an abort listener, and releases the reader lock in a finally path. The UI can disconnect a subscription without cancelling its server workflow. The parser consumes byte chunks with an incremental decoder, so it does not assume the transport splits at character boundaries.

The design-system dialog uses the native dialog element and showModal, with an accessible name and a close form. This delegates modal focus behavior to the browser, but testing remains necessary: embedded contexts, nested dialogs and removal of the opener can change the expected focus destination. Do not add conflicting manual keyboard handlers without identifying an actual gap.

Native form controls provide labels, keyboard operation, autofill and submission semantics. Custom controls should earn their additional state machine. An as prop that turns a button into a link does not automatically preserve button keyboard semantics; model navigation and commands as distinct public contracts.

Failure investigation

Take a heap snapshot after opening and closing the agent view 100 times. Inspect retained readers, listeners and detached DOM nodes. Compare allocations after garbage collection rather than equating all transient allocations with leaks. Next, throttle the CPU and stream many progress events; inspect input delay and memory together. A bounded queue can still produce too much rendering work.

Service workers introduce another cache and lifecycle. An offline queue in IndexedDB does not by itself make the HTML shell available offline. The workbench demonstrates durable queued edits while an already-loaded application is disconnected; a fully installable offline shell is a separate exercise.

Exercise, feedback and migration

Write a resource table with creator, sharing scope, cancellation and cleanup for a reader, timer, subscription and runtime. Deliberately remove one cleanup and identify its retaining path. A strong answer shows evidence after repeated navigation, preserves draft data on disconnect, and does not “fix” memory by cancelling accepted server work. Adopt the smallest native primitive that meets requirements, then verify keyboard and recovery behavior before removing the previous implementation.

Executable reference and sources

Implementation · Behavioral evidence · Primary source.

Run the projects and assessment. Human review is pending.