1# ArkUI Data Updates
2
3When data downloaded from the Internet or generated locally needs to be sent to the UI thread for display, the ArkUI annotation and [\@Sendable decorator](../arkts-utils/arkts-sendable.md#sendable-decorator) cannot modify variables and objects at the same time, in this scenario, you need to use [makeObserved](../quick-start/arkts-new-makeObserved.md) to import the observable Sendable shared data to ArkUI.
4
5This example describes the following scenarios:
6- **makeObserved** has the observation capability after data of the @Sendable type is passed in, and the change of the data can trigger UI re-rendering.
7- Obtain an entire data from the subthread and replace the entire observable data of the UI thread.
8- Re-execute **makeObserved** from the data obtained from the subthread to change the data to observable data.
9- When data is passed from the main thread to a subthread, only unobservable data is passed. The return value of **makeObserved** cannot be directly passed to a subthread.
10
11```ts
12// SendableData.ets
13@Sendable
14export class SendableData {
15  name: string = 'Tom';
16  age: number = 20;
17  gender: number = 1;
18  likes: number = 1;
19  follow: boolean = false;
20}
21```
22
23```ts
24import { taskpool } from '@kit.ArkTS';
25import { SendableData } from './SendableData';
26import { UIUtils } from '@kit.ArkUI';
27
28@Concurrent
29function threadGetData(param: string): SendableData {
30  // Process data in the subthread.
31  let ret = new SendableData();
32  console.info(`Concurrent threadGetData, param ${param}`);
33  ret.name = param + "-o";
34  ret.age = Math.floor(Math.random() * 40);
35  ret.likes = Math.floor(Math.random() * 100);
36  return ret;
37}
38
39@Entry
40@ComponentV2
41struct Index {
42  // Use makeObserved to add the observation capability to a common object or a @Sendable decorated object.
43  @Local send: SendableData = UIUtils.makeObserved(new SendableData());
44
45  build() {
46    Column() {
47      Text(this.send.name)
48      Button("change name").onClick(() => {
49        // Change of the attribute can be observed.
50        this.send.name += "0";
51      })
52
53      Button("task").onClick(() => {
54        // Places a function to be executed in the internal queue of the task pool. The function will be distributed to the worker thread for execution.
55        **NOTE**<br>Data can be constructed and processed in subthreads. However, observable data can be processded only in the main thread.
56        // Therefore, only the'name' attribute of'this.send' is transferred to the subthread.
57        taskpool.execute(threadGetData, this.send.name).then(val => {
58          // Used together with @Local to observe the change of this.send.
59          this.send = UIUtils.makeObserved(val as SendableData);
60        })
61      })
62    }
63  }
64}
65```
66