AlpineJS Skill: Conditional Rendering: x-if vs. x-show

This directive conditionally renders a block of HTML. If the condition evaluates to true, the content inside the associated <template> tag is cloned and inserted into the DOM. If false, the content is removed from the DOM.

<template x-if="isVisible">
  <div>This content is only in the DOM when isVisible is true.</div>
</template>

This directive conditionally shows or hides an element by toggling its CSS display property (typically between its original value and none). The element always remains in the DOM.

<div x-show="isOpen">
  This content is always in the DOM but hidden if isOpen is false.
</div>

The <template> tag is a standard HTML element used to hold client-side content that is not to be rendered when a page is loaded but may be instantiated subsequently during runtime using JavaScript. AlpineJS requires x-if to be placed on a <template> tag. The <template> tag itself is not rendered; only its content is conditionally rendered.

A common mistake is to put x-if directly on a <div> or other visible elements. AlpineJS 3+ strictly expects x-if to be used with a <template> tag. The content you want to conditionally render should be inside this <template>.

Incorrect: <div x-if="condition">...</div>

Correct: <template x-if="condition"><div>...</div></template>

This is a critical difference with significant implications for performance and behavior:

• x-if: When the condition becomes true, the elements defined within the <template> are created and added to the DOM. Any Alpine components within this block are initialized, and their x-init (or init() method) functions run. When the condition becomes false, these elements are completely removed from the DOM. Alpine components within are destroyed (destroy() method or x-destroy directive runs), and their internal state is lost. Each time it's re-shown, it's a fresh initialization.
• x-show: The element (and any Alpine components within it) is initialized once when the parent Alpine component loads. Toggling the x-show condition merely changes the CSS display property. The element remains in the DOM, and its state (e.g., input values, component data) is preserved across toggles. x-init runs only once.

Implications:

• Performance: Use x-if for content that is computationally expensive to render/initialize (e.g., complex components, large lists, elements with many event listeners) and is only shown rarely. This avoids the initial performance hit. Use x-show for content that is toggled frequently (e.g., dropdowns, tooltips, simple modals) because the cost of toggling CSS is minimal, and the initialization cost is paid only once.
• Initialization Logic (init() / x-init): Code in init() for a Mcomponent inside an x-if block will run every time the block is shown. For x-show, it runs only on the initial load. Be mindful of this if your init() performs actions like API calls or heavy setup.
• Cleanup (destroy() / x-destroy): Cleanup logic is relevant for x-if as components are truly destroyed. This is useful for removing global event listeners or releasing resources. With x-show, components are not destroyed when hidden.