Add diagnostics page and enhance rendering optimizations

- Introduced a new diagnostics page to monitor state changes and component renders.
- Updated NavMenu to include a link to the diagnostics page.
- Enhanced SelectorStoreComponent to optimize rendering by preventing unnecessary re-renders.
- Improved diagnostics middleware integration for better performance tracking.

Author: mashrulhaque

samples/EasyAppDev.Blazor.Store.Sample/Layout/NavMenu.razor

@@ -24,6 +24,11 @@
                 <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="diagnostics">
+                <span class="bi bi-speedometer2" aria-hidden="true"></span> Diagnostics
+            </NavLink>
+        </div>
     </nav>
 </div>
 

samples/EasyAppDev.Blazor.Store.Sample/Pages/Counter.razor

@@ -12,6 +12,11 @@
     <p><small>Last action: <strong>@State.LastAction</strong></small></p>
 }
 
+<div class="alert alert-secondary mt-2">
+    <strong>Render Count:</strong> @_renderCount
+    <small class="text-muted"> (Expected: 1 per increment/decrement + 1 initial = @(State.Count + 1))</small>
+</div>
+
 @* Note: This component uses SelectorStoreComponent and only re-renders when Count changes.
    Changes to LastAction alone will NOT trigger a re-render, improving performance. *@
 
@@ -23,11 +28,18 @@
 </div>
 
 @code {
-    // Only re-render when Count changes (not when LastAction changes)
+    private int _renderCount = 0;
+
+    // Granular selector: only re-render when Count changes
+    // The base SelectorStoreComponent automatically prevents duplicate renders!
     protected override object SelectState(CounterState state)
         => state.Count;
 
-
+    protected override void OnAfterRender(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+        _renderCount++;
+    }
 }
 
 
@@ -51,6 +63,8 @@
     </p>
 </div>
 
-@* Diagnostic Panel - Only available in DEBUG builds *@
-<DiagnosticPanel DisplayMode="DiagnosticDisplayMode.Floating" />
+@* DiagnosticPanel kept on separate /diagnostics page.
+   The Counter component only re-renders when Count changes (selector optimization).
+   This means DiagnosticPanel updates for other events (subscriptions, non-Count state changes)
+   would be blocked by ShouldRender(). For full diagnostic visibility, visit /diagnostics. *@
 

samples/EasyAppDev.Blazor.Store.Sample/Pages/Diagnostics.razor

@@ -0,0 +1,38 @@
+@page "/diagnostics"
+
+<PageTitle>Store Diagnostics</PageTitle>
+
+<h1>Blazor Store Diagnostics</h1>
+
+<p class="lead">
+    Monitor state changes, component renders, performance metrics, and subscriptions in real-time.
+</p>
+
+<div class="alert alert-info">
+    <h4>About This Page</h4>
+    <p>
+        This diagnostics panel is on a separate page to prevent performance impacts on other components.
+        The panel subscribes to diagnostic events and re-renders when data changes, which could cause
+        unnecessary renders if embedded directly in production pages.
+    </p>
+</div>
+
+@* Diagnostic Panel - Only available in DEBUG builds *@
+#if DEBUG
+<DiagnosticPanel DisplayMode="DiagnosticDisplayMode.Inline" InitiallyCollapsed="false" />
+#else
+<div class="alert alert-warning">
+    <h4>Diagnostics Not Available</h4>
+    <p>Diagnostics are only available in DEBUG builds. Run the application with <code>dotnet run</code> (without --configuration Release) to enable diagnostics.</p>
+</div>
+#endif
+
+<style>
+    /* Make the inline diagnostics panel take full width */
+    .blazor-store-diagnostics.inline {
+        position: static;
+        width: 100%;
+        max-width: none;
+        margin-top: 20px;
+    }
+</style>

samples/EasyAppDev.Blazor.Store.Sample/Program.cs

@@ -30,7 +30,8 @@
         .WithLogging();
 
 #if DEBUG
-    // Add diagnostics middleware in DEBUG builds
+    // Enable diagnostics middleware for tracking state changes and component renders
+    // This is now safe with ShouldRender() optimization preventing cascade renders
     var diagnosticsService = sp.GetRequiredService<IDiagnosticsService>();
     storeBuilder = storeBuilder.WithDiagnostics(diagnosticsService);
 #endif

src/EasyAppDev.Blazor.Store/Blazor/SelectorStoreComponent.cs

@@ -37,6 +37,8 @@ public abstract class SelectorStoreComponent<TState> : ComponentBase, IDisposabl
     private IDisposable? _subscription;
     private bool _disposed;
     private object? _selectedValue;
+    private object? _lastRenderedValue;
+    private bool _isFirstRender = true;
 #if DEBUG
     private Guid _subscriptionId;
 #endif
@@ -177,12 +179,43 @@ protected override void OnInitialized()
         SubscribeToStore();
     }
 
-#if DEBUG
+    /// <inheritdoc />
+    protected override bool ShouldRender()
+    {
+        // Always render on first render
+        if (_isFirstRender)
+        {
+            return true;
+        }
+
+        // Only render if the selected value has actually changed since last render
+        // This prevents duplicate renders from Blazor's internal rendering mechanism
+        var currentSelected = _selectedValue;
+
+        if (currentSelected == null && _lastRenderedValue == null)
+        {
+            return false;
+        }
+
+        if (currentSelected == null || _lastRenderedValue == null)
+        {
+            return true;
+        }
+
+        return !currentSelected.Equals(_lastRenderedValue);
+    }
+
     /// <inheritdoc />
     protected override void OnAfterRender(bool firstRender)
     {
         base.OnAfterRender(firstRender);
 
+        _isFirstRender = false;
+        _lastRenderedValue = _selectedValue;
+
+#if DEBUG
+        // Record render event for diagnostics
+        // This is now safe with ShouldRender() optimization preventing cascade renders
         if (DiagnosticsService is not null)
         {
             DiagnosticsService.RecordRender(new RenderEvent
@@ -194,8 +227,8 @@ protected override void OnAfterRender(bool firstRender)
                 Reason = firstRender ? "Initial Render" : "Selector Value Changed"
             });
         }
-    }
 #endif
+    }
 
     /// <summary>
     /// Subscribes to store changes using the selector pattern.
@@ -229,6 +262,8 @@ protected virtual void SubscribeToStore()
             callback: value =>
             {
 #if DEBUG
+                // Record subscription notification for diagnostics
+                // This is now safe with ShouldRender() optimization preventing cascade renders
                 DiagnosticsService?.RecordSubscriptionNotification(_subscriptionId);
 #endif
                 _selectedValue = value;