Conditional Rendering

Using if()

The if() method provides conditional rendering - elements are added or removed from the DOM based on the condition:

HTML

<div rq="message">
  This content will be removed from the DOM when store.isVisible is true
</div>

JavaScript

defineComponent("my-component", {
  store: {
    isVisible: true
  },
  setup(component, props, store) {
    component.query("message").if(() => store.isVisible);
  }
})

Setup Function with if()

When using if(), elements are completely removed and re-added to the DOM. This means any bindings or event listeners need to be re-initialised when the element is rendered. The setup function provides a way to handle this initialisation:

HTML

<div rq="user-info">
  <div rq="name"></div>
  <div rq="role"></div>
  <button rq="button">Action</button>
</div>

JavaScript

defineComponent("my-component", {
  store: {
    isVisible: true,
    user: {
      name: "John",
      role: "admin"
    }
  },
  setup(component, props, store) {
    component.query("user-info").if(
      // Conditional function
      () => store.isVisible,
      // Setup function
      (el) => {
        // These bindings will be set up each time
        // the element is rendered
        el.query("name").text(() => store.user.name);
        el.query("role").text(() => store.user.role);

        // Event listeners will also be re-attached
        el.query("button").on("click", () => {
          // handle click
        });
      }
    );
  }
})

Using show()

The show() method toggles an element's visibility using the CSS display property:

HTML

<div rq="message">
  This content remains in the DOM but is hidden with display: none
</div>

JavaScript

defineComponent("my-component", {
  store: {
    isVisible: true
  },
  setup(component, props, store) {
    component.query("message").show(() => store.isVisible);
  }
})

if() vs. show()

The choice between if() and show() depends on your needs:

• if() is "real" conditional rendering:

  • Elements are completely removed/added to the DOM

  • Child elements and event listeners are properly cleaned up

  • Higher toggle costs but no initial render cost if false

• show() is simpler:

  • Elements always remain in the DOM

  • Only toggles the CSS display property

  • Lower toggle costs but elements are always rendered

Using rq-cloak

You can use the rq-cloak attribute to prevent content flashing when the page initially loads.

CSS

You can define your own CSS rules for different rq-cloak values. We recommend supporting both hidden and invisible values to handle different use cases.

• hidden sets the initial display property to none. This will cause layout shift when the element is displayed

• invisible sets the initial opacity to 0

<style>
  [rq-cloak="hidden"] {
    display: none;
  }

  [rq-cloak="invisible"] {
    opacity: 0;
  }
</style>

HTML

<!-- Hide with display: none -->
<div rq="message" rq-cloak="hidden">
  Content is hidden until ready
</div>

<!-- Hide with opacity: 0 -->
<div rq="another-message" rq-cloak="invisible">
  Content is invisible until ready
</div>