Remounting when LiveComponent is called inside stateless component LiveView

Hello, based on my understanding, the order of calling module in LiveView should be like this:

Live → Live Component → Stateless Component

I have a LiveView module that call a stateless component which has a Live Component inside itself; after changing parent state I mean LiveView module the Live Component mount is being reloaded instead of update function.

Is there any chance to force it not to load mount function?

Phoenix LiveView: 0.18.18
Phoenix: 1.7.0

Before seeing code, I have nested components in my project something like this:

<dashboard> // state less
  <layout>  // state less
    <setting> // state less
      <LiveComponentA>....</LiveComponentA> // LiveComponent
    </setting>
  </layout>
</dashboard>

LiveView module:

Stateless component

And:

And:

Live Component

Thank you in advance

The live component will always remount when its id is changed. You’re giving it a random ID, which means it remounts whenever the parent updates.

4 Likes

What a mistake I made, thinking that when the state changes, the component that generates random IDs is not called upon.
Many thanks

Taking a bullet for the rest of us. We are doing God’s work for developers not even born yet. :joy:

2 Likes