question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

lifecycle method onChange called before onInit and onCheck

See original GitHub issue

I have attached onInit, onCheck, onChange, and onAllChangesDone lifecycle methods attached to a component(to reason about the sequence in which these methods get called). When the component is instantiated, its onChange method is called first, then onInit, onCheck and onAllChangesDone methods are called in sequence. The docs says onChange

Notify a directive when any of its bindings have changed. This method is called right after the directive’s bindings have been checked, and before any of its children’s bindings have been checked. It is invoked only if at least one of the directive’s bindings has changed.

  1. Why onChange is called initially when the component is instantiating?
  2. And whenever I change the value of a property on the component, onChange is fired first before onCheck. Is this intended behavior?

Here is a simple plunker for the above question -> http://plnkr.co/edit/sk6Xi7L6a7ob9xiRJaSJ?p=preview. View the console for the sequence.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

30reactions
poshestcommented, May 11, 2017

+1 for $onInit being called before $onChanges. I think that’s the way most people would expect it. I have many use cases for an init function which $onChanges depends on already having been called. I don’t have a single use case for the other way around. There’s consternation in the AngularJS world about it too.

0reactions
angular-automatic-lock-bot[bot]commented, Sep 11, 2019

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

how to stop ngOnChanges Called before ngOnInit()
This is normal behavior. Take a look to Lifecycle Hooks in Angular 2 docs. · 1. Yes, I know that. · Right after...
Read more >
OnChanges - Angular
A lifecycle hook that is called when any data-bound property of a directive changes. Define an ngOnChanges() method to handle the changes.
Read more >
ASP.NET Core Razor component lifecycle | Microsoft Learn
The Razor component processes Razor component lifecycle events in a set of synchronous and asynchronous lifecycle methods.
Read more >
Lifecycle hooks in Angular 1.5 - Ultimate Courses
What calls $onChanges? ... Is two-way binding through “=” syntax dead? Using isFirstChange(). $onDestroy. Using $onDestroy. Conclusion. $onInit.
Read more >
Using the State Hook - React
If you used classes in React before, this code should look familiar: ... some values between the function calls — useState is a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found