1# ArkUI Data Updates 2 3When data, regardless of whether it is downloaded from the Internet or generated locally, needs to be sent to the UI thread for display, the annotations and the [\@Sendable decorator](../arkts-utils/arkts-sendable.md#sendable-decorator) in ArkUI cannot simultaneously decorate variables and objects. Therefore, it is necessary to use [makeObserved](../ui/state-management/arkts-new-makeObserved.md) to import observable Sendable data into ArkUI. 4 5This example describes the following scenarios: 6- When **makeObserved** is used with @Sendable data, it enables observability of changes that can trigger UI refreshes. 7- Data is fetched from a child thread and used to replace the observable data in the UI thread entirely. 8- The data fetched from the child thread is reprocessed with **makeObserved** to become observable. 9- Only non-observable data is passed from the UI main thread back to the child thread. The return value of **makeObserved** cannot be directly passed to child threads. 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<!-- @[define_sendable_class](https://gitee.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/ArkTsConcurrent/ApplicationMultithreadingDevelopment/PracticalCases/entry/src/main/ets/managers/SendableData.ets) --> 23 24```ts 25import { taskpool } from '@kit.ArkTS'; 26import { SendableData } from './SendableData'; 27import { UIUtils } from '@kit.ArkUI'; 28 29@Concurrent 30function threadGetData(param: string): SendableData { 31 // Process data in the child thread. 32 let ret = new SendableData(); 33 console.info(`Concurrent threadGetData, param ${param}`); 34 ret.name = param + "-o"; 35 ret.age = Math.floor(Math.random() * 40); 36 ret.likes = Math.floor(Math.random() * 100); 37 return ret; 38} 39 40@Entry 41@ComponentV2 42struct Index { 43 // Use makeObserved to add observation to a regular object or a @Sendable object. 44 @Local send: SendableData = UIUtils.makeObserved(new SendableData()); 45 46 build() { 47 Column() { 48 Text(this.send.name) 49 Button("change name").onClick(() => { 50 // Changes to properties are observable. 51 this.send.name += "0"; 52 }) 53 54 Button("task").onClick(() => { 55 // Enqueue the function to be executed in the task pool, waiting to be dispatched to a worker thread. 56 // Data construction and processing can be done in the child thread, but observable data cannot be passed to the child thread (observable data can only be manipulated in the UI main thread). 57 // Therefore, only the 'name' property of 'this.send' is passed to the child thread. 58 taskpool.execute(threadGetData, this.send.name).then(val => { 59 // Used together with @Local to observe changes to 'this.send'. 60 this.send = UIUtils.makeObserved(val as SendableData); 61 }) 62 }) 63 } 64 } 65} 66``` 67<!-- @[update_arkui_data](https://gitee.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/ArkTsConcurrent/ApplicationMultithreadingDevelopment/PracticalCases/entry/src/main/ets/managers/MakeobservedSendable.ets) --> 68