---
schema_version: "1"
id: b6fd5a23976f6f595f5fdf3477aa1cdb89cddbbc0b30718af01466ef6d3f4080
title: Best Practices for Conditional Markup
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-conditional-markup.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-conditional-markup.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 54c5848b2e53ade59863934dd5f92519d3bb41013cd1ba400bee813f0d5cff43
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Best Practices for Conditional Markup

Using the `<aura:if>` tag is the preferred approach to conditionally display markup but there are alternatives. Consider the performance cost and code maintainability when you design components. The best design choice depends on your use case.

## Conditionally Create Elements with `<aura:if>`

Let’s look at a simple example that shows an error message when an error occurs.

```nolang
<aura:if isTrue="{!v.isError}">
    <div>{!v.errorMessage}</div>
</aura:if>
```

The `<div>` component and its contents are only created and rendered if the value of the `isTrue` expression evaluates to `true`. If the value of the `isTrue` expression changes and evaluates to `false`, all the components inside the `<aura:if>` tag are destroyed. The components are created again if the `isTrue` expression changes again and evaluates to `true`.

The general guideline is to use `<aura:if>` because it helps your components load faster initially by deferring the creation and rendering of the enclosed element tree until the condition is fulfilled.

## Toggle Visibility Using CSS

You can use CSS to toggle visibility of markup by calling `$A.util.toggleClass(cmp, 'class')` in JavaScript code.

Elements in markup are created and rendered up front, but they’re hidden. For an example, see [Dynamically Showing or Hiding Markup](https://developer.salesforce.com/docs/platform/aura-platform/js-cb/js-cb-show-hide-markup.md).

The conditional markup is created and rendered even if it’s not used, so `<aura:if>` is preferred.

## Dynamically Create Components in JavaScript

You can dynamically create components in JavaScript code. However, writing code is usually harder to maintain and debug than using markup. Again, using `<aura:if>` is preferred but the best design choice depends on your use case.

**See Also**  


-   [Conditional Expressions](https://developer.salesforce.com/docs/platform/aura-platform/expr/expr-conditional.md)
-   [Dynamically Creating Components](https://developer.salesforce.com/docs/platform/aura-platform/js-cb/js-cb-dynamic-cmp-async.md)