While preparing myself to the Developer 1 certification I met the following question:

A developer created a lightning component named accountList.cmp that displays a list of Accounts. Client side logic that is executed when a user hovers over an Account in the list should be stored in which bundle member?

A) accountList.renderer

B) accountListHelper.js

C) accountList.helper

D) accountListRenderer.js

I answered C), while the correct answer is D).

I am working with Lightning and I always delegate as much logic as I can from the controller to helper. And the button listeners which get executed are always in the controller, but since I do not see the controller option in the answers I stick to helper, which is C).

I consider the renderer to be something which is responsible for displaying components. So, if possible, could you please provide the resource to research the topic further and explain the answer to the question?

  • Are these questions coming from Salesforce themselves? Use of renderer is pretty much deprecated now "It’s preferred and easier to handle the render event rather than the alternative of creating a custom renderer." See developer.salesforce.com/docs/atlas.en-us.lightning.meta/…
    – Aidan
    Aug 3 '18 at 10:03
  • @Aidan, I am not sure where from the question is coming. I was provided with the question by my company to prepare for the certification. And as I remember the lightning topic is on the list of topics for the certification, so I am to expect to be asked anything regarding it on the certification and the renderer is not an exception I think.
    – iloveseven
    Aug 3 '18 at 10:15

On top of my head, On Hover is similar to DOM manipulation. Due to lightning locker services if you do dom manipulation in helper which is called from controller you get exceptions as it is not allowed.

Dom manipulation is always allowed in after renderer, so accountListRenderer seems the best option.


But But But.. if you see the method signature of afterRenderer

afterRender : function(component, helper) {
   // Write your custom code here. 

you can call helper method from the renderer, so technically helper is the best place to write that code, and it should be called from renderer and not the controller.

  • 1
    Are you sure that it's Locker Service preventing you from modifying the DOM in the controller/helper? My understanding is that Locker Service prevents you viewing/editing the DOM outside your namespace, irrespective of where you are in the lifecycle. The only issue with the controller is that you don't necessarily know if the DOM has been rendered yet, so you might get errors because the DOM doesn't exist. And you might not get what you expect because the DOM may be modified again later by the framework.
    – Aidan
    Aug 3 '18 at 10:39
  • Hi @Aidan, I can't find that excact documentation, but my thoughts are coming from this and similar posts. salesforce.stackexchange.com/questions/133905/… Aug 3 '18 at 11:05
  • 1
    I don't think that issues in questions like that are due to Locker Service enforcing security, I think they're due to Locker Service changing the order-of-execution which exposes the fact that they were trying to access the DOM before it was guaranteed to be ready. If you could read the DOM outside your namespace in a renderer, then that would be a big hole in the security model. I was so intrigued that I made a test, and it does never get access to the lightning namespace: bitbucket.org/snippets/aidan_harding/regzby It only ever sees one button
    – Aidan
    Aug 3 '18 at 11:32
  • Interesting, No idea if it was the case few releases back.. Thanks for your pointers. Aug 3 '18 at 13:09

The framework has its own event system. DOM events are mapped to Lightning events, since HTML tags are mapped to Lightning components.

Any browser DOM element event starting with on, such as onclick or onkeypress, can be wired to a controller action. You can only wire browser events to controller actions.

The "Framework" button wires the onclick attribute in the component to the handleClick action in the controller.

I'm eliminating Option A and C because when you have a component with name accountList the helper would translate to accountListHelper.js and renderer to accountListRenderer.js

In your question the DOM event is going to be onMouseOver. Because you don't have controller.js here you are now stuck with two options helper.js and render.js, So It has to either B or D

Lets Look at B: Your helper method alone cannot be directly invoked when DOM events are fired, they have to be wired to either a Controller.js or Renderer.js and here i don't see a controller.js as one of the options so they only other place you can call the helper method would calling it from renderer.js.

D: Now based on the above analysis the only option here you have would be calling the onMouseOver event from renderer.js(You could still delegate core logic to helper but actual event handling should take place in renderer.js)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.