I cannot find a good example that tackles this, I searched through google and find only the documentation in salesforce, although they suggest not to use it, i need this for my report, if you have a good working component that explains custom render(), afterRender(), rerender() and unRender() in a lightning component - i would love to study that. Thanks.

1 Answer 1


Generally, you don't use reRender, you simply use render. render accepts a single parameter, the elements that were already rendered, which you can then modify by attaching event handlers, customizing CSS, adding new elements, and so on.

I do actually have a demo of using a renderer, the lightning:progressRing component. The renderer enables an SVG and calculates the necessary path:

    // Create SVG, path, populate with default values from controller
    render: function(component, helper) {
        var result = this.superRender(),
            xmlns = "http://www.w3.org/2000/svg",
            updateContainer = result[0].querySelector("#progressContainer"),
            value = component.get("v.value"),
            dValue = "M 1 0 A 1 1 0 "+Math.floor(value / 50)+" 1 "+
                Math.cos(2 * Math.PI * value / 100)+" "+
                Math.sin(2 * Math.PI * value / 100)+" L 0 0",
            svg = document.createElementNS(xmlns,"svg"),
            path = document.createElementNS(xmlns,"path");
        svg.setAttributeNS(null,"viewBox", "-1 -1 2 2");
        path.setAttributeNS(null, "class", "slds-progress-ring__path");
        path.setAttributeNS(null, "d", dValue);
        return result;
    // Update the progress bar on a rerender event
    rerender: function(component, helper) {
        var value = component.get("v.value"),
            dValue = "M 1 0 A 1 1 0 "+Math.floor(value / 50)+" 1 "+
                Math.cos(2 * Math.PI * value / 100)+" "+
                Math.sin(2 * Math.PI * value / 100)+" L 0 0",
            svg = component.getElement().querySelector("svg"),
            path = svg.childNodes[0];
        path.setAttributeNS(null, "d", dValue);

Notice here, though, I use rerender to update the SVG, instead of just using the render event. It works really well, so this should give you something to play with.

  • Thank you so much! this would help a lot!. I am aware of not using that in my components though. But would love to study that part also and because it is needed on my presentation. Mar 31, 2018 at 1:19
  • @JayveeVillaceran The link in this answer has a complete copy-paste gist you can use to play with. Glad I could help you out.
    – sfdcfox
    Mar 31, 2018 at 1:22
  • 1
    Saw it, really the example that I need. Thank you so much! Mar 31, 2018 at 1:30
  • hmm i tried it in my org, i cannot seem to follow what it does, do you have more basic example? Mar 31, 2018 at 2:22
  • @JayveeVillaceran Errr, no, that's about as basic as it gets. But, I'll see if I can write up a canvas render or something for you to follow along with. I'll write up something up this weekend for you.
    – sfdcfox
    Mar 31, 2018 at 2:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .