How to handle deeply nested component updates?

[IngwiePhoenix]

So this is a question inspired by both a previous discussion post here, and something that has been on my mind for a long time in regards to HTMX and that ended up becoming a very long Reddit post.

Let's say I have several components nested throughout the page:

• There is a "User" component that shows their name, avatar and perhaps a notification badge.
• There is the side menu which shows the current URL highlighted with an .active class.
• There is the main content
  • ...inside which there are sections: a textbox (form), Messages, and Members (chat interface)

Now imagine there was also a settings icon to bring up the settings for the current user. I would not want to render the entire chat UI again - but just that settings panel that is to show up. That means, I need just this piece of the UI and nothing else.

How do you handle that? Do you just have a separate route for just that component perhaps? I would like to know how I could "optimize" in such a situation. And, granted, this is a rather simple example... but I would like to know how to handle this properly. :)

Thanks!