3

I've an aura component that is overriding the Standard New button. The aura component in turn calls a LWC - which loads the custom record edit form. What I've noticed is - the first time the New button is called - the Aura's Init and LWC's connectedCallback are called. If you create a record and hit save, or populate a few fields and click cancel and redirect to the previous URL, and Click "New" again - then the ConnectedCallback isn't called again - which leads to the LWC displaying the previous cached data.

Is this a known behavior? Or is there a workaround to ensure the component is loaded properly without showing cached data?

Edit: I thought Edit and View call connectedCallback when loaded the second time, but on closer inspection even they work the same way as "New" button override does.

Improve this question
4
  • you have to understand different lifecycle in LWC rather then connected callback and here is the link for your reference - developer.salesforce.com/docs/component-library/documentation/…
    – Sahil Malhotra
    Jul 17, 2020 at 9:59
  • Hi Sahil - Could you please elaborate? As per my understanding - when a LWC loads in the DOM, the connectedCallback is called. If I am navigating away - by clicking cancel or closing the tab, and again clicking new - and I can see the LWC's elements like record edit form and other things load, shouldn't the connectedCallback be initiated first or even called?
    – Piyush
    Jul 17, 2020 at 11:05
  • First question: What are you doing in the connectedCallback? Is it really necessary to use the connectedCallback?
    – Ricardo Coutinho
    Jul 17, 2020 at 23:40
  • Hi @RicardoCoutinho - I don't need to use connectedCallback. But it is't getting called unless you refresh the page.My data is cached. Example -- 1. I override Opportunity New Button. 2. Press New --> Select a Record Type 3. On the page layout give a value for let's say the "Stage" field. 4. Don't hit save - but click on Opportunity Tab again and press new (repeat step 1, 2). 5, The page layout loads with Stage field auto filled with the previous value I had selected. Unless I manually refresh the page, it's always cached. I noticed the connectedCallback not getting called here.
    – Piyush
    Jul 19, 2020 at 10:17

2 Answers 2

Reset to default
2

TL;DR: That is the expected behavior.

Explanation: The problem is not in the connectedCallback but in Cancel behavior. It doesn't remove your elements from DOM, but just hides them. This is ok, because you may need to load a component several times - why have your browser to load it to DOM every time?

To clear out your "cached" data your may want to use renderedCallback, which should be called on each render.

Improve this answer
7
  • Hi @nchursin - Could you please elaborate more on this? A user can click on any other tab within Salesforce/click a link somewhere - and be redirected away from the page. I am probably not able to understand this well, but in these cases the renderCallback isn't getting called. How would I use this to clear cached data and make sure fresh data is loaded again? Could you please help me with a basic example?
    – Piyush
    Jul 20, 2020 at 12:29
  • 1
    @Piyush I believe you meant " connectedCallback isn't getting called". This is also a part of the platform behavior. To speed everything app Lightning kinda caches connected components. So next time you need it it can just render a component that is already in DOM, just hidden. This works faster than add a component to the DOM each time, but makes it possible to behave as you described
    – nchursin
    Jul 20, 2020 at 12:42
  • Then how do I make sure the data is fresh and not cached everytime. I put console.log statements on both connectedCallback and renderedCallback, and none of them printed the second time, but only the 1st time. Am I doing this wrong? As per my understanding - the connectedCallback is called when the component is inserted to the DOM, and as you explained - if it's already present, it won't be called again. And, renderedCallback is called after every render of the component. Since data is cached the second time, this doesn't get called the on second hit of New button
    – Piyush
    Jul 20, 2020 at 13:58
  • Hmm, I think I need to research the renderedCallback behavior. I thought it should be called each time. Will double check
    – nchursin
    Jul 20, 2020 at 14:36
  • Could you please let me know if you find anything on this?
    – Piyush
    Jul 20, 2020 at 18:34
0

Just tried a workaround. Using a change handler event on page reference, and on the change handler method, refreshing the page using - $A.get('e.force:refreshView').fire();. This loads the LWC to the DOM again, and I don't face the caching issue anymore. Not the ideal solution - but this works everytime.

Improve this answer

You must log in to answer this question.

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