Rendering a component twice

[franzliedke]

I have some use cases where I could imagine rendering a component instance twice. For example, we render our navigation menu markup twice, once for wider screens and once for the small-screen dropdown menu variant.

For this, I could imagine re-using the components for the individual menu elements that appear in both menus and call #render_in twice.

Are there any known downsides to / dangers in doing that, i.e. due to internal state of components during rendering? What do I have to be careful about?

[xkraty]

I don't think you should have any problem instancing a component multiple times, that's what it is made for!

[Spone]

Thanks for providing more details. I'd say that what you're doing is safe.

Another approach you may not now is using capture.

# navigation_bar_component.html.erb

<% rendered_logo = capture do %>
  <%= render logo_component %>
<% end %>

<nav class="nav-desktop">
  <%= rendered_logo %>
  <!-- other menu stuff -->
</nav>

<nav class="nav-mobile">
  <%= rendered_logo %>
  <div class="hamburger-menu">
    <!-- other menu stuff -->
  </div>
</nav>

This way, you only render the component instance once, then reuse the resulting string.

[franzliedke]

@boardfish Nope, it's the same instance. The helper method uses memoization.

@Spone Thanks, that's interesting to know. Is that also available within the component class? Then I could combine that with memoization:

# navigation_bar_component.rb

def logo
  @logo ||= capture { render LogoComponent.new } # Or is it helpers.capture ?
end

And in my view:

<!-- navigation_bar_component.html.erb -->

<nav class="nav-desktop">
  <%= logo %>
  <!-- other menu stuff -->
</nav>

<nav class="nav-mobile">
  <%= logo %>
  <div class="hamburger-menu">
    <!-- other menu stuff -->
  </div>
</nav>

[xkraty]

@franzliedke what's the benefit of capturing something that will get memoized anyway?

[franzliedke]

@xkraty Not sure I understand your question. capture lets me store (and therefore memoize) the output of the LogoComponent. If I memoized the LogoComponent instance instead, it would still have to render itself twice.

[Spone]

I think in this case, you can use render_in to render to a string, no need for capture: https://viewcomponent.org/guide/getting-started.html#rendering-viewcomponents-to-strings-inside-controller-actions