Such an exciting week for the angular community since the Angular v14 is released. Angular v14 is packed with amazing works like Typed reactive form, Page title resolver, standalone component, inject function, etc.
Standalone component & inject function interests me more than anything as it's paving the way to reactify the angular. The term "reactify" may be funny but these features will give the developers who shifted to React will allow them to look back to the Angular once again and this term made me think about another popular terminology of React, Stateless component.
Stateless component is enforced in React and it's being part of the framework. When comes to angular, stateless components are not popular as in react. Since the standalone component has been introduced to the Angular, I suppose, the Stateless Standalone component will also be a talk in near future.
So how to make your angular component stateless?
I think the answer is very simple.
"DON'T MUTATE THE INCOMING PROPERTIES".
All the mutations should be handled at the container/parent component. That's it. Now your angular component will become stateless or presentational or any other name you call it.
Let's see how a stateless component can be implemented in angular.
The above component is a simple stateless standalone component in which title property is not mutated inside the component rather the changes have been emitted to the parent component. The parent component which will act as the container component will handle the mutation.
The stateless component provides several advantages such as below.
- Less code and easy to maintain.
- Performance - When combined with the OnPush strategy, the stateless component might provide better performance.
- Easy to test since the result will be the same for input and no side effects.
- Ensure a single source of truth when working with state management libraries.
Now we have seen how to create a simple stateless component but there is a chance that another developer makes the component stateful which is meant to be stateless.
StatelessComponent decorator
StatelessComponent decorator of the @protools/angular package will help you to ensure and maintain the statelessness of your angular component by respecting this simple rule "DON'T MUTATE THE INCOMING PROPERTIES".
To make your angular component stateless simply add the StatelessComponent decorator from the @protools/angular package.
Exclude methods
You can exclude methods from preserving the statelessness of the component which means you can change the input properties within those methods. To exclude any method, provide the excludeMethods option of the StatelessComponent decorator. This helps you to provide two-way binding support for a property.
That's it. Now your component became stateless and it will ensure the statelessness during further changes too.
Take a look at the @protools/angular package below and give it a try.
https://www.npmjs.com/package/@protools/angular
Feel free to contact me. Happy coding!!
Top comments (0)