A Web component that doesn't have mechanism to communicate any http service or retrieve the data from source on his own, are called passive web component. Those components are dependent on input data passed in from parent component. They can pass signal or event to parent component when needed. Passive component can maintain internal component state.
In the below example, child ListComponent receives a input from the ParentComponent as a input props. If user clicks view detail on any item in the list, child passive component sends signal to the parent active component with selected item id and other information. Now, parent component acts on event based on the action type. In this case, parent component can fetch the detail for the selected item, render the detail component.
Although, in redux architecture, passive component can receive dipatch object in the props and dispatch the action on his own. But, the only active component observes the change in state, and pass the updated data to the child passive component.
In the case, parent component can play as a mediator between two siblings child component for data sharing. That way, child component #1 ( eg. ListComponent ) doesn't need to know about child component #2 ( eg. DetailComponent ). I have already explained the different ways of component communication on this blog post.
In the below example, child ListComponent receives a input from the ParentComponent as a input props. If user clicks view detail on any item in the list, child passive component sends signal to the parent active component with selected item id and other information. Now, parent component acts on event based on the action type. In this case, parent component can fetch the detail for the selected item, render the detail component.
Although, in redux architecture, passive component can receive dipatch object in the props and dispatch the action on his own. But, the only active component observes the change in state, and pass the updated data to the child passive component.
In the case, parent component can play as a mediator between two siblings child component for data sharing. That way, child component #1 ( eg. ListComponent ) doesn't need to know about child component #2 ( eg. DetailComponent ). I have already explained the different ways of component communication on this blog post.
In the above case, parent component is active component, as the component knows how to fetch data from the source for example http client service in this case.
In the redux architecture, active parent component subscribes or connected to the store for app state data. React redux provides "Connect()" function for connecting components with the store.
Now the question is when to use active or passive component ?
Factors:
- Data share-ability : In the component architecture, one or many components may want to share the the same data. Active or self contained components data, is mostly scoped to that component and his children components. Passive components emphasis the sharability or ( are more social ) as they depend on some parent component to pass the data. So, in one major component of the page or a single parent component in the page should have at least one active parent component. Also, the passing the data to long child component tree as a props is also not good approach. So, this should be in the balance. In Redux architecutre, parent active component subscribes all the data needed for himself and his child components.
- Reusabilty : Mostly, passive components can easily be reused. In the react world, stateless functional components are considered as a stateless function who receives a input data as props, and does not maintain the state.
- Flexibility : Self contained active component is tightly coupled with the data that he is dependent on. Component, who is dependent on "rest todo end point", does not work similar todos that can be passed from outside.
Note :
- I am inferring the active component, that is similar to other name like, Smart Component
- Paradigm for getting the data from rest endpoint vs. subscribing the store data will be slighly different.
Reference :
Great Article
ReplyDeleteReact Based Projects for Final Year Students
FInal Year Project Centers in Chennai
JavaScript Training in Chennai
JavaScript Training in Chennai