Refine component lifecycle hooks #11127
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This commit refines the lifecycle hooks to more completely support the
use-cases.
On first render (in order):
didInitAttrs
runs afterattrs
is guaranteed to be up to date. Thisis more reliable than trying to ensure that
attrs
are alwaysavailable on
init
.didReceiveAttrs
runs afterdidInitAttrs
(it also runs onsubsequent re-renders, which is useful for logic that is the same
on all renders).
willRender
runs before the template is rendered. It runs when thetemplate is updated for any reason (both initial and re-render, and
regardless of whether the change was caused by an attrs change or
re-render).
didInsertElement
runs after the template has rendered and theelement is in the DOM.
didRender
runs afterdidInsertElement
(it also runs on subsequentre-renders).
On re-render (in order):
didUpdateAttrs
runs when the attributes of a component have changed(but not when the component is re-rendered, via
component.rerender
,component.set
, or changes in models or services used by thetemplate).
didReceiveAttrs
, same as above.willUpdate
runs when the component is re-rendering for any reason,including
component.rerender()
,component.set()
or changes inmodels or services used by the template.
willRender
, same as abovedidUpdate
runs after the template has re-rendered and the DOM isnow up to date.
didRender
, same as above.Note that a component is re-rendered whenever:
component.set()
is calledcomponent.rerender()
is called(including through computed properties).
Because of the Glimmer engine, these re-renders are fast, and avoid
unnecessary work.