What is JavaScript isolation in Blazor components?

Blazor allows JavaScript isolation in standard JavaScript modules. JavaScript isolation provides the following benefits:

1. Create an export JavaScript function in the wwwroot/script folder.
   [isolationScript.js]

   export function jsIsolation(value) {
        console.log(value);
    }
   

2. Import the JavaScript function using the IJSRuntime.InvokeAsync method in Blazor and call the JavaScript method on button click event.
   [Index.razor]

   @page "/"
   
   @inject IJSRuntime JSRuntime
     
   Enter text:<input @bind="content" />
    <button class="btn btn-primary" @onclick="OnClickButton">Click</button>
     
    @code {
        private string content { get; set; }
     
        private async void OnClickButton()
        {
            var jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./script/isolationScript.js"); 
            await jsModule.InvokeVoidAsync("jsIsolation", content);
        }
    }
   

   The JavaScript code file loads only during a button click event. It will not load again and again for each button click.