use-js-interop

Call JavaScript from Blazor using IJSRuntime inside OnAfterRenderAsync, never in OnInitialized or constructors, because JS is unavailable during server prerendering. Import a collocated .razor.js module and invoke its exported functions through a typed wrapper class.

Pass a DotNetObjectReference to JS and call invokeMethodAsync with the name of a public [JSInvokable] method. Wrap the call in try/catch since circuit loss throws, and use await InvokeAsync around StateHasChanged inside the callback.

JS interop fails during prerendering because JavaScript is not available until the component renders on the client. Move all interop calls into OnAfterRenderAsync with a firstRender guard, and apply parameter-driven updates there using a change flag.

JSInvokable methods must be public; private or internal methods silently fail at runtime. Also verify the method name string in JS matches exactly, ideally defined as a const at the top of the module to prevent typos.

Implement IAsyncDisposable, call the JS dispose function, then dispose the module and DotNetObjectReference. Wrap the JS calls in try/catch for JSDisconnectedException, since the circuit may already be gone when disposal runs.

Avoid JS interop when CSS can achieve the same result, such as theming with custom properties, data attributes, or pseudo-classes. Also avoid many fine-grained interop calls; batch related operations into single functions in both directions.