> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Global Variables

> Learn how to create, bind, and update global variables in YiDA. Master page-level state management similar to React state and trigger re-rendering with API methods.

Global variables in YiDA are similar to React's state concept. They are used primarily for page-level state management, and developers can change global state and trigger page re-rendering by calling the corresponding APIs.

## Create Global Variables

Create a global variable by adding one in the Data Source panel.

When creating a global variable, specify the following:

* **Name** — Declares the name of the global variable. Must follow JavaScript variable naming conventions.
* **Description** — Provides a description of the global variable. This description appears during variable binding.
* **Data** — Sets the initial value of the global variable. Supports basic JavaScript types such as string, boolean, and object.

<Tip>
  YiDA provides a default global variable `urlParams` for retrieving parameters from the current page URL. Access URL parameters through `this.state.urlParams.xxx`, where `xxx` is the parameter name. If the parameter does not exist, the value is `undefined`.
</Tip>

## API

YiDA provides two APIs for reading and writing global variables.

### Read

In variable binding and action panels, retrieve page global variables using the following API. In variable binding scenarios, omit `this` and use `state.xxx` directly:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
const name = this.state.name;
```

### Update

Use the `setState` API to change page global variables and trigger page re-rendering (similar to React's `setState`), as shown below:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
this.setState({
  name: 'Jack'
});
```

<Warning>
  YiDA's `setState` API looks consistent with React's but has slight differences:

  * YiDA's `setState` API does not provide callback capability, so you cannot pass a callback function as you would in React's `setState`.
  * YiDA's `setState` API uses a reactive data model. As a result, you can access the new state immediately after calling `setState`, as shown below:

  ```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
  // Assume this.state.name is 'Alice' before calling setState
  this.setState({
    name: 'Bob'
  });

  // Prints: Bob
  console.log(this.state.name); 

  ```
</Warning>

## Usage Scenarios

Once global variables are defined, they can be consumed in two scenarios within custom pages.

### Variable Binding

Bind state by configuring the variable binding of a component property. Bind global variables by typing manually or selecting from the Data Source. In variable binding scenarios, the variable format is `state.xxx`.

Bind the Content property of a Text component to a variable:

Bind the Content data to a global variable named `name`:

Click Preview in the upper-right corner to see the binding result:

### Action Handling

In the action panel, developers can read and write global variables through JavaScript, as shown below:

Looks exactly like React's API, doesn't it? You can also visit the [event handling documentation](/open/yida/guide/concept/event) for detailed usage instructions on event handling.