# Reactive Variables

### Guide to Reactive State in Svelte

Svelte is a modern JavaScript framework that makes it easy to build reactive web applications. One of its powerful features is the ability to declare reactive state and derived state. This guide will walk you through how to use these features effectively.

#### Basic Reactive State

In Svelte, you can declare a piece of reactive state using the `$state` rune. This allows your application to automatically update when the state changes.

**Example Code**

Here is a minimal example of declaring and using reactive state in Svelte:

{% tabs %}
{% tab title="src/App.svelte" %}

```html
<script>
    let name = $state('Shento');
</script>

<h1>My name is {name}</h1>
```

{% endtab %}

{% tab title="localhost:5000" %}
My name is Shento
{% endtab %}
{% endtabs %}

#### Derived State

If a value depends on another value, you can use the `$derived` rune. This ensures that the derived value is automatically recalculated whenever the dependent value changes.

**Example Code**

Let's extend our previous example to include a derived state:

{% tabs %}
{% tab title="src/App.svelte" %}

```html
<script>
    let name = $state('Shento');
    let uppercaseName = $derived(name.toUpperCase());
</script>

<h1>My name is {uppercaseName}</h1>
```

{% endtab %}

{% tab title="localhost:5000" %}
My name is SHENTO
{% endtab %}
{% endtabs %}

#### Explanation

Let's break down the code:

* **Reactive State Declaration**:

  ```html
  let name = $state('Shento');
  ```

  Here, `name` is a reactive state variable initialized with the value 'Shento'. You can name this variable anything you like.
* **Derived State Declaration**:

  ```html
  let uppercaseName = $derived(name.toUpperCase());
  ```

  `uppercaseName` is a derived state that depends on `name`. It automatically updates to the uppercase version of `name` whenever `name` changes. The `.toUpperCase()` method is standard JavaScript.
* **HTML Binding**:

  ```html
  <h1>My name is {uppercaseName}</h1>
  ```

  This line binds the `uppercaseName` variable to the HTML, so it displays the current value of `uppercaseName`.

#### Important Points

{% hint style="info" %}
The `$state` and `$derived` runes are specific to Svelte and are used to create reactive and derived state variables.
{% endhint %}

{% hint style="warning" %}
Make sure to always use the `$derived` rune for values that depend on other reactive state variables to ensure they update correctly.
{% endhint %}

#### Summary

* Use `$state` to declare reactive state variables.
* Use `$derived` to declare variables that depend on other reactive state variables.
* Bind these variables to your HTML to automatically update the UI when the state changes.


---

# 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://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/getting-started-with-sveltekit/base-syntax-and-core-features-of-svelte/reactive-variables.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.