# Reactive Components

## What is Reactivity?

Reactivity means that components can "talk" to each other. When a user interacts with one component (like selecting a row in a Data Table), other components on the page can *automatically* update to reflect that change. This creates a much more dynamic and intuitive user experience than static pages.

### **Key Benefits:**

* **Simplified Development:** You don't need to write complex code or formulas to connect components.
* **Responsive Interface:** The UI feels "alive" and instantly reflects changes.
* **Data Consistency:** Automatic updates ensure that all components display consistent information.
* **Easier Maintenance:** Changes in one place automatically propagate, reducing errors

## How Reactivity Works in Avonni Dynamic Components

Avonni Dynamic Components make reactivity simple. It's all about connecting components through their *data*. 

Here are the key concepts.

### **Key Concepts**

#### Avonni Query Data Source

The **Avonni Query Data Source** is the foundation for reactivity. It's designed to:

* **Support Dynamic Filtering:** Filters can depend on values within your Dynamic Component, including attributes of other components.
* **Automatically Re-query:** When a referenced value changes, the query automatically re-executes, updating the connected component.
* **Efficient Updates:** Optimized for frequent data changes.

#### Direct Attribute Referencing

You create these dynamic links using *direct attribute referencing*. This is a simple, visual way to connect components *without* writing complex formulas.

{% @arcade/embed flowId="p8KWbkvXFNiGmXCPnIOA" url="<https://app.arcade.software/share/p8KWbkvXFNiGmXCPnIOA>" %}

## Examples

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Reactive Map and Data Table</strong></td><td><a href="/pages/WH7gCVvTb5cPmumk2Qza">/pages/WH7gCVvTb5cPmumk2Qza</a></td></tr><tr><td><strong>Master-Detail Relationship with Data Tables</strong></td><td><a href="/pages/Fh23Z4hNg8EiQcY6oi90">/pages/Fh23Z4hNg8EiQcY6oi90</a></td></tr><tr><td><strong>Vertical Tabs with Reactive Data Table</strong></td><td><a href="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/x3MbN4RkQwkk5RMjLWkH">/spaces/dHOej9Pd5IxJNGEJMZKW/pages/x3MbN4RkQwkk5RMjLWkH</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/tutorials/reactive-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.