ezzabuzaid / react-context-in-angular

1 stars 0 forks source link

Bonus Part: The Issue With OnPush #13

Open ezzabuzaid opened 3 years ago

ezzabuzaid commented 3 years ago

In the Angular Implementation section, there's was an issue when a consumer host component (the component that will be the consumer parent) is using the OnPush change detection strategy so as fix a ReplaySubject used to share the value to the consumer component from its nearest provider.

The thing is that OnPush prevents the component from being auto-checked thus the template of the component won't be updated except on special cases.

Unfortunately, neither of the cases above is applicable on The ConsumerComponent

  1. It doesn't have an @Input for the value because it will be bonded indirectly.
  2. It doesn't have any event handler.
  3. And no observable can be linked to its template since we project the content as is.

Hint: component template implies the template property in the @Component decorator and doesn't refer to ng-template.

The other solution and the initial implementation was to use The DoCheck lifecycle because it is usually used when a component is using OnPush change detection strategy to detect changes to mutable data structures and mark the component for the next change detection check cycle accordingly.

Moreover, the DoCheck lifecycle will be invoked during every change detection run but with OnPush the change detector will ignore the component so it won't be invoked unless it happens manually and again even this is out of the scope because you do not know if the consumer provider value changed or not.

That was just a plus section for the folks who will wonder about that.