From 9da6df1be4445acc338e447c73b130c39705c295 Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Wed, 4 Dec 2024 00:10:07 +0100 Subject: [PATCH 1/7] [Blazor] Performance - Change detection - set parameters only --- aspnetcore/blazor/performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/performance.md b/aspnetcore/blazor/performance.md index 71661280723f..77d7b75b6d15 100644 --- a/aspnetcore/blazor/performance.md +++ b/aspnetcore/blazor/performance.md @@ -35,7 +35,7 @@ The last two steps of the preceding sequence continue recursively down the compo To prevent rendering recursion into a particular subtree, use either of the following approaches: -* Ensure that child component parameters are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. +* Ensure that the *set* parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. * Override : * To accept nonprimitive parameter values, such as complex custom model types, event callbacks, or values. * If authoring a UI-only component that doesn't change after the initial render, regardless of parameter value changes. From 88539e249acdf6e62dd41169a5667eb45c42ff00 Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Wed, 4 Dec 2024 00:13:19 +0100 Subject: [PATCH 2/7] Update performance.md --- aspnetcore/blazor/performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/performance.md b/aspnetcore/blazor/performance.md index 77d7b75b6d15..f9c546e3b733 100644 --- a/aspnetcore/blazor/performance.md +++ b/aspnetcore/blazor/performance.md @@ -35,7 +35,7 @@ The last two steps of the preceding sequence continue recursively down the compo To prevent rendering recursion into a particular subtree, use either of the following approaches: -* Ensure that the *set* parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. +* Ensure that the **set** parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. * Override : * To accept nonprimitive parameter values, such as complex custom model types, event callbacks, or values. * If authoring a UI-only component that doesn't change after the initial render, regardless of parameter value changes. From 1cdfe60a32ca5afee87f240ff136bb41a92c13b9 Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Wed, 4 Dec 2024 00:17:18 +0100 Subject: [PATCH 3/7] starting net9 EventCallbacks are included in change detection --- aspnetcore/blazor/performance.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/aspnetcore/blazor/performance.md b/aspnetcore/blazor/performance.md index f9c546e3b733..1aaf66919367 100644 --- a/aspnetcore/blazor/performance.md +++ b/aspnetcore/blazor/performance.md @@ -33,12 +33,27 @@ At runtime, components exist in a hierarchy. A root component (the first compone The last two steps of the preceding sequence continue recursively down the component hierarchy. In many cases, the entire subtree is rerendered. Events targeting high-level components can cause expensive rerendering because every component below the high-level component must rerender. +:::moniker range=">= aspnetcore-9.0" + +To prevent rendering recursion into a particular subtree, use either of the following approaches: + +* Ensure that the **set** parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. +* Override : + * To accept nonprimitive parameter values, such as complex custom model types, or values. + * If authoring a UI-only component that doesn't change after the initial render, regardless of parameter value changes. + +:::moniker-end + +:::moniker range="< aspnetcore-9.0" + To prevent rendering recursion into a particular subtree, use either of the following approaches: * Ensure that the **set** parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. * Override : * To accept nonprimitive parameter values, such as complex custom model types, event callbacks, or values. * If authoring a UI-only component that doesn't change after the initial render, regardless of parameter value changes. + +:::moniker-end The following airline flight search tool example uses private fields to track the necessary information to detect changes. The previous inbound flight identifier (`prevInboundFlightId`) and previous outbound flight identifier (`prevOutboundFlightId`) track information for the next potential component update. If either of the flight identifiers change when the component's parameters are set in [`OnParametersSet`](xref:blazor/components/lifecycle#after-parameters-are-set-onparameterssetasync), the component is rerendered because `shouldRender` is set to `true`. If `shouldRender` evaluates to `false` after checking the flight identifiers, an expensive rerender is avoided: From 6ee0c1610761d1bfeaf79c6c258ca18f33bccf2f Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Wed, 4 Dec 2024 00:40:11 +0100 Subject: [PATCH 4/7] update Co-authored-by: Luke Latham <1622880+guardrex@users.noreply.github.com> --- aspnetcore/blazor/performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/performance.md b/aspnetcore/blazor/performance.md index 1aaf66919367..47d2600749a6 100644 --- a/aspnetcore/blazor/performance.md +++ b/aspnetcore/blazor/performance.md @@ -37,7 +37,7 @@ The last two steps of the preceding sequence continue recursively down the compo To prevent rendering recursion into a particular subtree, use either of the following approaches: -* Ensure that the **set** parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. +* Ensure that the set parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. * Override : * To accept nonprimitive parameter values, such as complex custom model types, or values. * If authoring a UI-only component that doesn't change after the initial render, regardless of parameter value changes. From 1fe76f729ccc0dfa264baf3cad36d05f0aca8c11 Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Wed, 4 Dec 2024 00:40:46 +0100 Subject: [PATCH 5/7] Update aspnetcore/blazor/performance.md Co-authored-by: Luke Latham <1622880+guardrex@users.noreply.github.com> --- aspnetcore/blazor/performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/performance.md b/aspnetcore/blazor/performance.md index 47d2600749a6..2fc1f2027006 100644 --- a/aspnetcore/blazor/performance.md +++ b/aspnetcore/blazor/performance.md @@ -48,7 +48,7 @@ To prevent rendering recursion into a particular subtree, use either of the foll To prevent rendering recursion into a particular subtree, use either of the following approaches: -* Ensure that the **set** parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. +* Ensure that the set parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. * Override : * To accept nonprimitive parameter values, such as complex custom model types, event callbacks, or values. * If authoring a UI-only component that doesn't change after the initial render, regardless of parameter value changes. From 24bc6f9e994d09daf4599040e7b064b3ff69186e Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Wed, 4 Dec 2024 00:40:58 +0100 Subject: [PATCH 6/7] Update aspnetcore/blazor/performance.md Co-authored-by: Luke Latham <1622880+guardrex@users.noreply.github.com> --- aspnetcore/blazor/performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/performance.md b/aspnetcore/blazor/performance.md index 2fc1f2027006..748b5942b982 100644 --- a/aspnetcore/blazor/performance.md +++ b/aspnetcore/blazor/performance.md @@ -39,7 +39,7 @@ To prevent rendering recursion into a particular subtree, use either of the foll * Ensure that the set parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. * Override : - * To accept nonprimitive parameter values, such as complex custom model types, or values. + * To accept nonprimitive parameter values, such as complex custom model types or values. * If authoring a UI-only component that doesn't change after the initial render, regardless of parameter value changes. :::moniker-end From b79fd5034b4902ee7429e140f1aedf21c6fa2a00 Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Wed, 4 Dec 2024 00:41:40 +0100 Subject: [PATCH 7/7] Update performance.md --- aspnetcore/blazor/performance.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/aspnetcore/blazor/performance.md b/aspnetcore/blazor/performance.md index 748b5942b982..7bdcf7d00048 100644 --- a/aspnetcore/blazor/performance.md +++ b/aspnetcore/blazor/performance.md @@ -33,10 +33,10 @@ At runtime, components exist in a hierarchy. A root component (the first compone The last two steps of the preceding sequence continue recursively down the component hierarchy. In many cases, the entire subtree is rerendered. Events targeting high-level components can cause expensive rerendering because every component below the high-level component must rerender. -:::moniker range=">= aspnetcore-9.0" - To prevent rendering recursion into a particular subtree, use either of the following approaches: +:::moniker range=">= aspnetcore-9.0" + * Ensure that the set parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. * Override : * To accept nonprimitive parameter values, such as complex custom model types or values. @@ -46,8 +46,6 @@ To prevent rendering recursion into a particular subtree, use either of the foll :::moniker range="< aspnetcore-9.0" -To prevent rendering recursion into a particular subtree, use either of the following approaches: - * Ensure that the set parameters of child components are of primitive immutable types, such as `string`, `int`, `bool`, `DateTime`, and other similar types. The built-in logic for detecting changes automatically skips rerendering if the primitive immutable parameter values haven't changed. Only the parameters that are explicitly set on the component are considered for change detection. If you render a child component with ``, where `CustomerId` is an `int` type, then the `Customer` component isn't rerendered unless `item.CustomerId` changes. * Override : * To accept nonprimitive parameter values, such as complex custom model types, event callbacks, or values.