CODEWITHSUNDEEP
javascriptember.jsember-cli
Mari Selvan
Mari Selvan

Reputation: 3802

Ember : What is the meaning of re-render in ember js?

I'm using ember.js(version 3.7) and I bite confused now. Now, I'm working on optimizing the code part for our app. First I'll try to find What are the things are re-render in components? After getting into this topic I bite confused with it.

In ember they used didRender() method to trigger re-rendering things (jQuery DOM Manipulation, Asnyc function loading,etc...). Right now I don't have much idea about re-render in ember. Can someone explain to me re-render in detail? And, please share if you have any resource about re-render in ember.

Thanks in advance.

Upvotes: 1

Views: 362

Answers (1)

ykaragol
ykaragol

Reputation: 6221

didRender hook doesn't about triggering a re-render. It is described as the Guide that you shared the link of:

You can leverage this hook to perform post-processing on the DOM of a component after it's been updated.

You might want to do something about sizes or focuses or scrolls. To achieve that you need to wait till your rendering finishes. Because otherwise you cannot get the exact values and positions of the components. For those cases you can use didRender hook.

For example: - if you want to focus some parts of the view - if you want to scroll some parts of the view - if you want to resize some components - if you want to call a third-party libraries which tries to access DOM element. etc. You can use this hook.

For sure, if you do something that affects to component's values, it can trigger a re-render. But this is something that you normally shouldn't do.

Let's have one more clarification of re-render:

As components are rendered, re-rendered and finally removed, Ember provides lifecycle hooks that allow you to run code at specific times in a component's life.

(Ref)

Guide says about 3 main phases (Ref):

  • Initial Render
  • Re-render
  • Component Destroy

In here Re-render means, if an argument or a property of a component changes, it starts to re-render itself. For example, think of a person-card component which displays the properties of a person. Such as {{person-card person=model.person}}. Whenever the person parameter changes, the component will re-render.

Upvotes: 1

Related Questions