Microsoft Blazor have certain component lifecycles hooks which enables the communication and rendering during the development phases. These hooks make sure that the parent-child component rendering and binding works effortlessly.

1. BLAZOR COMPONENT
LIFECYCLES

2. INTR ODUC TION
o Component lifecycles refer to all the stages a
certain software component must go through
during its presence
o Each phase holds a significant value and is
executed at certain points in the lifecycle
o In Blazor, these hooks are divided into three main
methods named as Initialization, Rendering,
Updating and Disposal

3. COMP ONEN T
LIFE CYCL E
BLAZ OR
https://www.google.com/url?sa=i&url=https%3A%2F%2Fjonathancrozier.com%2Fblog%2Funderstanding-the-blazor-component-
lifecycle&psig=AOvVaw0Mrx23NpWb9KR-
M1BCW_SS&ust=1705920176063000&source=images&cd=vfe&opi=89978449&ved=0CBUQjhxqFwoTCODsxIam7oMDFQAAAAAdAAA
AABAD

4. LIFE CYCL E CO MPON ENTS
o OnInitialized()
o OnInitializedAsync()
o OnParametersSet()
o BuildRenderTree()
o ShouldRender()
o OnAfterRender()
o OnAfterRenderAsync()
o Dispose()
o StateHasChanged()

5. O N I N I T I A L I Z E D < A S Y N C > ( )
o Executed when the component is created
o It is only executed once (at the time of initialization)
o Useful in the initialization of any component, where
it must be executed no matter what the case is
o It is invoked before the rendering occurs
o OnInitializedAsync is used if the function triggers an
await in the scope

6. O N I N I T I A L I Z E D < A S Y N C > ( )
The currentCount is
set to 0 and is placed
as a private variable;

7. O N I N I T I A L I Z E D < A S Y N C > ( )
Clicking this button
will increment the
value by +1

8. O N I N I T I A L I Z E D < A S Y N C > ( )
Now, let’s set the
value of
currentCount to 5
and place it inside
OnInitialized()

9. O N I N I T I A L I Z E D < A S Y N C > ( )
Notice that the OnInitialized method
was called the first thing program got
executed. Now, clicking the button
Click me will increment +1 in the
current count

10. O N P A R A M E T E R S S E T < A S Y N C > ( )
o Executed immediately after OnInitialized<Async> if this is
the new instance of a component
o If it is an existing instance of a component, then it is called
whenever a change has occurred in the component
o Also called when the component’s parameter is set or
changed
o Parameters are properties annotated with the Parameter
attribute. When these parameters change, then
OnParametersSet is invoked

11. O N P A R A M E T E R S S E T < A S Y N C > ( )
This is the default Index.razor file
which loads initially when the Blazor
Server project is loaded
We called a Counter.razor (child) in
the Index.razor (parent) along with
the certain parameter childCount
whilst setting its value 5

12. O N P A R A M E T E R S S E T < A S Y N C > ( )
[Parameter] is used to pass the value
childCount from the child to the parent
Index.razor
Sets the parameter value to the currentCount
which is the part of the child

13. O N P A R A M E T E R S S E T < A S Y N C > ( )

14. B U I L D R E N D E R T R E E ( )
o Most crucial when it comes to constructing the virtual DOM
representation of the document.
o Virtual DOM refers to the in-memory representation of the
actual HTML structure
o Defines the structure of component’s render tree
o Adds the element, content and attributes
o Takes one parameter i.e., RenderTreeBuilder

15. S H O U L D R E N D E R ( )
o Allows you to control whether the component should re-
render or not
o Returns only two values true or false
o Inside ShouldRender(), custom logic is added based on the
current and previous state of the component to decide
whether a re-render is necessary

16. O N A F T E R R E N D E R < A S Y N C > ( )
o The method gets called after the component has been
rendered in your browser’s DOM
o Used for interacting with HTML element.
o Like getElementById() functionalitiy when we use JavaScript
DOM
o Takes a parameter firstRender indicating whether it is
rendered first time or not

17. O N A F T E R R E N D E R < A S Y N C > ( )
The program changes the heading Counter
Example’s color to green if value of
currentCount is even and blue is it is odd.
However, the color is black initially

18. S H O U L D R E N D E R ( )
Only displays the count if it is an even
number

19. S T A T E H A S C H A N G E D ( )
o Part of the ComponentBase class
o Notifies the Blazor Framework that the state of the
component has changed and that a re-render may be needed
o Used when the changes to the component’s state occur
outside of the normal Blazor event-handling lifecycle

20. S T A T E H A S C H A N G E D ( )

21. DISP OSE( )
o It is a part of IDisposable pattern and is used for cleanup
operations when the component is being removed from the
UI
o Allows the developers to release the resources, unsubscribe
from resources, or perform other cleanup tasks
o It’s used typically when a component acquires external
resources such as subscriptions, timers or other objects
needed to be released to prevent memory leaks

22. DISP OSE( )

23. THAN K YO U